elementplus表格问题循环展示?

站长

2024年06月23日 08:56 · 阅读数 6

elementplus表格，如下图有两条数据，每行有多个city和address循环展示在一行，前端该怎么处理呢，返回数据格式如下

 dataList: [
    {
      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"},
      ]
    },
]

elementplus表格问题循环展示?

1个回答

test

2024-06-23

很简单啊，就是自己循环处理一下 el-table-item 就好了。

answer image

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <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>
  </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"},
    ]
  },
  {
    date: "2022-06-02",
    cityList:[
      { city: "1",cityName:"北京",address:"xxx"},
      { city: "2",cityName:"上海",address:"xxx"}
    ]
  },
]

const countAddrInfo = tableData.reduce((total, current) => Math.max(total, current.cityList.length), 0)
</script>

Element Plus Playground

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容