vue+Element UI实现表格表头纵向显示

在Vue中使用Element UI时，要实现表头纵向显示，可以通过自定义表头的渲染来实现。以下是一个简单的示例，展示如何在Element UI的表格组件中实现表头纵向显示：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="(header, index) in transposedHeaders"
      :key="index"
      :label="header.label"
    >
      <template slot-scope="scope">
        {{ scope.row[header.key] }}
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 示例数据
      ],
      headers: [
        { label: '姓名', key: 'name' },
        { label: '年龄', key: 'age' },
        { label: '地址', key: 'address' }
      ]
    };
  },
  computed: {
    transposedHeaders() {
      // 将表头纵向显示，即将原本的表头变成表内容的形式
      const transposedData = this.headers.map(header => ({
        [header.key]: header.label
      }));
      // 合并为单个对象
      return Object.assign({}, ...transposedData);
    }
  }
};
</script>

在这个例子中，transposedHeaders 计算属性负责将原本的表头转换为表内容的形式，然后在模板中使用 el-table-column 渲染出转置后的表头。这样，原本的列变成了行，实现了表头的纵向显示。