如何使用 Element Plus 表格循环展示多条数据？

IT技术 2024-10-25 1431

如何使用 element plus 表格循环展示多条数据？

element plus 表格如何循环展示多条数据？

element plus 中的表格控件提供了强大且灵活的展示功能。当需要循环展示具有多个子项的数据时，可以通过以下步骤实现：

1. 循环创建子项列

使用 v-for 循环遍历子项数组，并为每个子项动态创建 el-table-column，指定其 prop 属性指向子项中的特定属性。例如：

<template v-for="index in countaddrinfo">
  <el-table-column :prop="`citylist[${index - 1}].cityname`" :label="'name' + index" width="180" :formatter="(row, column, cellvalue) => cellvalue || '--'" />
  <el-table-column :prop="`citylist[${index - 1}].address`" :label="'address' + index" :formatter="(row, column, cellvalue) => cellvalue || '--'" />
</template>