WTF？Element table还可以这样玩？

最近收到一个需求，需要我开发一个Element纵向表格，类似汽车之家的那种，用于参数对比。众所周知，Element表格是面向行对象，并未提供纵向表格的相关功能，这需求让我这个后端仔很为难啊。不过我是革命一块砖，哪里需要哪里搬。不就是个ELement葱香表格吗？干他！

解决思路

1. 把Element表格的数据渲染过程，由一维数组加对象的方式改为直接用二维数组进行渲染。
2. 对二维数组进行行列转置，可以更人性化的接收后台传过来的纵向数据。

实现代码

<template>
  <div class="column-oriented-table-panel">
    <div class="table-container">
      <el-table
        class="table"
        :data="data"
        height="100%"
        stripe
        border
      >
        <el-table-column
          :label="item"
          v-for="(item, index) in columnNames"
          :key="index"
          min-width="150px"
        >
          <template v-slot="scope">
            {{ scope.row[index] }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TwoDimensionalArrayTablePanel',
  props: {
    // 列名列表
    columnNames: {
      type: Array,
      default: () => [],
    },
    // 表格数据，数据类型为二维数组。
    // 例：
    // 若行列转置标记为false，二维数组 [[a, b, c], [1, 2, 3]] 会被渲染为：
    // | 列名1 | 列名2 | 列名3 |
    // | a | b | c |
    // | 1 | 2 | 3 |
    // 注意！此时列名列表的长度应该与 [a, b, c] 相等！
    //
    // 若行列转置标记为true，二维数组 [[a, b, c], [1, 2, 3]] 会被渲染为：
    // | 列名1 | 列名2 |
    // | a | 1 |
    // | b | 2 |
    // | c | 3 |
    // 注意！此时列名列表的长度应该与数组 tableData 的长度相等！
    tableData: {
      type: Array,
      default: () => [],
    },
    transposeFlag: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    determinantTranspose(oldArray) {
      return oldArray[0].map((col, i) => oldArray.map((row) => row[i]));
    },
  },
  computed: {
    data() {
      if (this.transposeFlag) {
        return this.determinantTranspose(this.tableData);
      }
      return this.tableData;
    },
  },
};
</script>

<style scoped>

.column-oriented-table-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.table-container {
  width: 100%;
  height: 100%;
  flex-grow: 1;
}

.table {
  width: 100%;
}

</style>

实现效果

左侧表格选中对象后，右侧表格自动添加需要展示的对象参数。