elementplus el-table(行列互换)转置

在Element Plus中，要实现el-table的行列互换（转置），即将表格的行变为列，列变为行，你可以使用CSS或JavaScript来操作DOM。

这里提供一个简单的JavaScript方案，通过操作DOM元素来实现转置。

<template>
  <el-button @click="transposeTable">转置表格</el-button>
  <el-table
    :data="tableData"
    :columns="transposedColumns"
    stripe
    style="width: 100%; margin-top: 10px;"
  ></el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ... 数据项
      ],
      columns: [
        // ... 原始列定义
      ],
      transposedColumns: []
    };
  },
  methods: {
    transposeTable() {
      // 转置列
      this.transposedColumns = this.transposeArray(this.tableData);
    },
    transposeArray(matrix) {
      return matrix.reduce((cols, row) => {
        return row.reduce((acc, key, index) => {
          acc[index] = acc[index] || [];
          acc[index].push(key);
          return acc;
        }, cols);
      }, []);
    }
  }
};
</script>

在上面的代码中，transposeTable方法会被调用来转置表格。transposeArray方法会遍历原始数据，并构建成转置后的列结构。

请注意，这个方案并不是直接使用Element Plus提供的API来转置表格，而是通过操作DOM来实现。这意味着表格的所有交互和样式都需要你手动处理，并且如果表格数据量很大或者有复杂的交互，这种方案可能会有性能问题。

另外，这个例子中的transposeArray函数只是简单地把二维数组的行转换成列，并不包括任何的数据处理或格式化。在实际应用中，你可能需要根据你的数据和需求来扩展这个函数。