实现效果
代码
<el-table :data="tableData" border><el-table-column label="数据" align="right" width="150"><el-table-column prop="name" label="数据指标" width="150"></el-table-column></el-table-column><el-table-columnv-for="(col, i) in columnList":key="i":prop="col.prop":label="col.label"align="center"><template v-if="col.children"><el-table-columnv-for="(item, index) in col.children":key="index":prop="item.prop":label="item.label"></el-table-column></template></el-table-column></el-table>data(){return {columnList: [{prop: "expected",label: "预期值",},{prop: "accuracy",label: "训练值",},{prop: "test",label: "检验值",},],tableData: [{name: "覆盖率",expected: "111",accuracy: "111",test: "111",},{name: "准确率",expected: "111",accuracy: "111",test: "111",},],}}<style lang="less" scoped>/deep/ .el-table th {overflow: initial;}/deep/.el-table th > .cell {font-family: PingFangSC-Regular, sans-serif;font-size: 14px;color: #2e3444;}/deep/ .el-table thead tr:first-of-type th:first-of-type,/deep/ .el-table thead tr:nth-of-type(2) th:first-of-type {border-bottom: none;padding: 0;}/deep/ .el-table thead tr:last-of-type th:first-of-type:before {content: "";position: absolute;width: 1px;background-color: #ebeef5;display: block;}/deep/ .el-table thead tr:last-of-type th:first-of-type:before {height: 183px; //根据情况调整bottom: 0;right: 0; //根据情况调整transform: rotate(-72deg); //根据情况调整transform-origin: bottom;}/deep/ .el-table tbody tr td:first-of-type .cell {font-family: PingFangSC-Regular, sans-serif;font-size: 14px;color: #2e3444;font-weight: 600;text-align: center;}</style>
