vue实现带有横向和纵向双表头

效果展示
具体实现

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <!-- 纵向表头 -->
      <el-table-column label="纵向表头" width="100">
        <template slot-scope="scope">
          {{ scope.row.verticalHeader }}
        </template>
      </el-table-column>
      <!-- 横向表头和数据列 -->
      <el-table-column label="横向表头1">
        <el-table-column prop="value1" label="值1"></el-table-column>
        <el-table-column prop="value2" label="值2"></el-table-column>
      </el-table-column>
      <el-table-column label="横向表头2">
        <el-table-column prop="value3" label="值3"></el-table-column>
        <el-table-column prop="value4" label="值4"></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          verticalHeader: '纵向表头1',
          value1: 'A1',
          value2: 'B1',
          value3: 'C1',
          value4: 'D1',
        },
        {
          verticalHeader: '纵向表头2',
          value1: 'A2',
          value2: 'B2',
          value3: 'C2',
          value4: 'D2',
        },
        // 添加更多数据项
      ],
    };
  },
};
</script>

<style>
/* 自定义样式，使纵向表头固定在左侧 */
.el-table th.el-table-column--selection,
.el-table th.el-table-column--expand,
.el-table th:first-child {
  position: sticky;
  left: 0;
  background-color: #f5f7fa;
  z-index: 1;
}

.el-table th.el-table-column--selection,
.el-table th.el-table-column--expand,
.el-table th:first-child::after {
  content: "纵向表头";
  transform: rotate(-90deg);
  position: absolute;
  left: 25px;
  top: 20px;
  white-space: nowrap;
  width: 30px;
}
</style>

ChatGPT真是唯一真神!!!