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

需求背景：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>