循环生成el-descriptions-item

0 后端返回数据格式

{
    "msg": "操作成功",
    "code": 200,
    "data": {
        "id": 42,
        "contactInfo": [
            {
                "contactPerson": "张三",
                "contactPhone": "13688888888"
            },
            {
                "contactPerson": "李四",
                "contactPhone": ""
            },
            {
                "contactPerson": "",
                "contactPhone": "13699999999"
            }
        ],
        "remark": "备注信息"
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

1 使用template

<el-descriptions class="operation-form-content" :column="2">
  <el-descriptions-item label="客户名称">{{clientInfo.clientName}}</el-descriptions-item>
  <template v-for="(item, index) in clientInfo.contactInfo">
    <el-descriptions-item label="联系人" :key="index">{{item.contactPerson}}</el-descriptions-item>
    <el-descriptions-item label="联系电话" :key="index">{{item.contactPhone}}</el-descriptions-item>
  </template>
</el-descriptions>
1
2
3
4
5
6
7