循环生成el-descriptions-item

最新推荐文章于 2023-12-20 10:33:30 发布

o0麦嘎

最新推荐文章于 2023-12-20 10:33:30 发布

阅读量1.2k

点赞数

文章标签： elementui

本文链接：https://blog.csdn.net/Gpointy/article/details/134264153

版权

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>