ElementPlus表格中如何循环展示多个城市和地址？

如何处理 elementplus 表格中循环展示多个 city 和 address？

elementplus 提供了灵活的表格展示方式，可以满足不同数据展示需求。当数据中包含循环嵌套的子数据时，通过前端处理可以轻松实现循环展示。

以下是如何处理 elementplus 表格中循环展示多个 city 和 address 的方法：

1. 遍历子数据

首先，需要遍历子数据列表，即 datalist 中的 citylist。countaddrinfo 用于记录子数据列表中元素的最大数量，并根据该值生成相应数量的列。

2. 动态生成列

然后，使用 template 循环生成列，每个列显示子数据列表中的一个元素。el-table-column 组件的 prop 属性用于指定列对应的数据属性，这里使用动态值来生成不同列的属性。formatter 函数用于格式化单元格内容，确保空值显示为破折号。

3. 根据循环数量生成列

根据 countaddrinfo 的值，循环生成 el-table-column 组件，每个组件展示一个子数据元素。例如，如果 countaddrinfo 为 3，那么将生成 3 对列，分别显示城市和地址。

4. example

下述代码示例实现了 elementplus 表格中循环展示多个 city 和 address：

<template><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="Date" width="180"></el-table-column><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><el-table-column :prop="`cityList[${index - 1}].address`" :label="'Address' + index" :formatter="(row, column, cellValue) => cellValue || '--'"></el-table-column></template></el-table></template><script lang="ts" setup>
const tableData = [
  {
    date: "2022-05-31",
    cityList:[
      { city: "1", cityName:"北京", address:"xxx" },
      { city: "2", cityName:"上海", address:"xxx" },
      { city: "3", cityName:"苏州", address:"xxx" },
    ]
  },
  {
    date: "2022-06-01",
    cityList:[
      { city: "1", cityName:"北京", address:"xxx" },
      { city: "2", cityName:"上海", address:"xxx" },
      { city: "3", cityName:"苏州", address:"xxx" },
    ]
  },
];
const countAddrInfo = tableData.reduce((total, current) => Math.max(total, current.cityList.length), 0);
</script>

以上就是ElementPlus表格中如何循环展示多个城市和地址？的详细内容，更多请关注其它相关文章！