动态table渲染数据如何渲染表格？

最新推荐文章于 2024-08-15 23:24:24 发布

MonsterQy

最新推荐文章于 2024-08-15 23:24:24 发布

阅读量567

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/xiao_a_fighting/article/details/130293329

版权

文章介绍了如何处理后台返回的动态二维数组数据，这些数据用于表格展示。通过声明一个计算属性，对数据进行重构，适应三种不同的数组格式，然后在Vue模板中使用这些处理后的数据进行表格渲染。

摘要由CSDN通过智能技术生成

需求背景：table依赖的数据为后台返回的，是动态的，共三种格式二维数组的形式：
第一种：

      [['time', '已选数据', '大盘对比数据'],
      ['企业IT部-公共', 50, 50],
      ['IT部-8000服务中心', 260, 0],
      ['企T部-构产品中心', 0, 10],
      ['企部-构产品中心', 112, 0],
      ['企业I-构产品中心', 40, 0],
      ['产品中心', 0, 20]]

第二种：

      [['time', '已选数据', '大盘对比数据', '自选对比数据'],
      ['企业IT部-公共', 50, 50, 10],
      ['IT部-8000服务中心', 260, 0, 71],
      ['企T部-构产品中心', 0, 0, 111],
      ['企部-构产品中心', 112, 0, 1144],
      ['企业I-构产品中心', 40, 0, 10],
      ['产品中心', 0, 20, 1478]]

第三种：

      [['time', '已选数据'],
      ['企业IT部-公共', 50],
      ['IT部-8000服务中心', 0],
      ['企T部-构产品中心', 0],
      ['企部-构产品中心', 112],
      ['企业I-构产品中心', 40],
      ['产品中心', 20]]

解决方案：
声明一个计算属性，重新构造表格渲染数据：

const tableData = computed(() => {
  const { source } = sourceTableData //后台返回来的数据本身为对象格式
  const [header, ...data] = source //解构二维数组的第0项为header，其他为body
  return data.map((row) => {
    const obj = {};
    header.slice(1).forEach((key, index) => (obj[key] = row[index + 1]));
    return obj;
  });
});

在vue模版中：

 <el-table :data="tableData" :border="false">
      <el-table-column
            v-for="(item, index) in Object.keys(tableData[0])"
            :key="index"
            :prop="item"
            :label="item"
         ></el-table-column>
</el-table>