el-table快速行转列

el-table组件是Element UI库中的一个表格组件，在Vue.js环境中使用，它支持将数据从行布局转换到列布局，即行列转换，以便更直观地展示数据。这个过程通常通过`el-table-column`和`row-key`属性以及`render-header`或`render-cell`方法来实现。

当你需要将一行数据的某列变成一列标题，其他行的数据作为值时，可以这样做：

1. 首先，确保每个原始数据对象都有一个唯一的标识符，如`row-key`，用于关联行和列。

<el-table :data="tableData" :row-key="getRowKey">

methods: {
   getRowKey(row) {
     return row.id; // 或者是其他唯一标识
   }
}

2. 使用`render-header`方法创建动态列头，这个函数会在每一列头部渲染内容。

<template slot-scope="scope">
  <el-table-column
    v-for="(item, index) in headerList"
    :key="index"
    :prop="item.value"
    :label="item.title"
    :render-header="renderHeader"
  >
  </el-table-column>
</template>

<script>
{
  data() {
    return {
      headerList: [
        { title: '标题A', value: 'columnA' },
        { title: '标题B', value: 'columnB' } // ... 其他列
      ]
    };
  },
  methods: {
    renderHeader(h, { column }) {
      return h('span', column.label);
    }
  }
}
</script>

在这个例子中，`headerList`数组定义了新的列结构，然后`renderHeader`负责在实际显示时渲染它们。