效果展示
具体实现

<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真是唯一真神!!!