el-table实现转置表格

在Vue.js中使用Element UI的el-table组件实现转置功能，通常需要将原始数据转换为转置后的数据结构。以下是一个简单的例子，展示如何实现转置功能：

<template>
  <el-table :data="transposedData" border style="width: 100%">
    <el-table-column
      v-for="header in transposedHeaders"
      :key="header.value"
      :label="header.text">
      <template slot-scope="scope">
        {{ scope.row[header.value] }}
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      originalData: [
        // 假设每个对象的属性与表头对应
        { date: '2016-05-02', name: 'Tom', address: 'No.1' },
        { date: '2016-05-04', name: 'Jerry', address: 'No.2' }
      ],
      transposedHeaders: [],
      transposedData: []
    };
  },
  created() {
    this.transposeData();
  },
  methods: {
    transposeData() {
      // 转置表头
      this.transposedHeaders = this.originalData.length > 0 ? Object.keys(this.originalData[0]).map(key => ({ text: key, value: key })) : [];
 
      // 转置数据
      this.transposedData = this.originalData.length > 0 ? this.originalData[0].map(_, colIndex) => this.originalData.map(row => row[colIndex]) ) : [];
    }
  }
};
</script>

在这个例子中，originalData是原始数据数组，每个对象代表一行，属性为表头。transposedHeaders是转置后的表头数组，每个对象包含表头的文本（text）和值（value）。transposedData是转置后的数据数组，通过遍历第一行的每个属性，然后取得对应列的所有值来生成。

请注意，这个例子假设所有原始数据对象具有相同的属性集合。如果原始数据对象的属性集合不同，转置前需要先对数据进行规范化，确保每个对象都具有相同的属性集合。