vue2中elementui表格实现竖向表头

在Vue 2中，如果你想要利用Element UI库实现一个表格并且希望表头呈现为竖直方向，可以使用Element UI提供的`el-table-column-group`组件以及自定义模板来达到这个效果。`el-table-column-group`允许你创建一个列组，然后将普通的`el-table-column`置于其中，通过CSS调整布局使其垂直排列。

下面是一个简单的示例：

<template>
  <div>
    <el-table :data="tableData">
      <!-- 创建一个列组 -->
      <el-table-column-group label="表头">
        <!-- 在列组里添加垂直排列的列 -->
        <el-table-column v-for="(item, index) in headerItems" :key="index" prop="headerProp" :label="item.label" align="center">
          <template slot-scope="scope">
            <!-- 自定义单元格内容 -->
            <span>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </el-table-column-group>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      headerItems: [
        { label: '标题1', prop: 'prop1' },
        { label: '标题2', prop: 'prop2' },
        // 更多标题...
      ]
    };
  }
};
</script>

<style scoped>
.el-table th {
  /* 使用 flex 和 transform 来让列头竖直排列 */
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  justify-content: center;
  transform: rotate(-90deg);
}
</style>

在这个例子中，你需要根据实际需要替换`tableData`、`headerItems`以及`headerProp`等变量，并根据你的项目结构和样式需求调整CSS部分。注意，由于CSS旋转可能会导致某些样式问题，你可能需要进一步优化或处理边缘情况。