循环生成el-descriptions-item

原创于 2023-11-07 12:00:28 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

0 后端返回数据格式

{
    "msg": "操作成功",
    "code": 200,
    "data": {
        "id": 42,
        "contactInfo": [
            {
                "contactPerson": "张三",
                "contactPhone": "13688888888"
            },
            {
                "contactPerson": "李四",
                "contactPhone": ""
            },
            {
                "contactPerson": "",
                "contactPhone": "13699999999"
            }
        ],
        "remark": "备注信息"
    }
}

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>