element 表格table纵横双列表头 斜线样式处理和多级表头循环
<!DOCTYPE html><html><head><meta charset="UTF-8"><!-- import CSS --><link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css"></head><body><div id="app"><el-card class="doubleThTable"><el-table :data="tableData.Data"style="width: 100%;margin-top:5px;"border><el-table-columnlabel="项目"align="right"width="150"><el-table-columnprop="name"label="事项"width="150"></el-table-column></el-table-column><el-table-column v-for="(col,i) in columnList":key="i" :prop="col.prop" :label="col.label"align="center"><template v-if="col.children"><el-table-column v-for="(item, index) in col.children":key="index":prop="item.prop" :label="item.label"></el-table-column></template></el-table-column></el-table></el-card></div></body><!-- import Vue before Element --><script src="/vue/dist/vue.js"></script><!-- import JavaScript --><script src="/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data() {return {columnList: [{prop: 'oneToFour',label: '1-4'},{prop: 'fiveToSix',label: '5-6'},{prop: 'sevenToNine',label: '7-9'},{prop: 'noLevel',label: '未构级'},{prop: 'highLevel',label: '存在生活自理障碍人数'},{label: '变动情况',children: [{prop: 'noChange',label: '无变动'}, {prop: 'littleChange',label: '小极差变动'}, {prop: 'largeChange',label: '大极差变动'}]},{label: '通过情况',children: [{prop: 'passNum',label: '通过'}, {prop: 'noPassNum',label: '未通过'}]}],tableData: {Data: [{name: '劳动能力',oneToFour: '111',fiveToSix: '111',sevenToNine: '111',noLevel: '111',highLevel: '111',noChange: '111',littleChange: '111',largeChange: '111',passNum: '111',noPassNum: '111'},{name: '劳动能力复查鉴定',oneToFour: '111',fiveToSix: '111',sevenToNine: '111',noLevel: '111',highLevel: '111',noChange: '111',littleChange: '111',largeChange: '111',passNum: '111',noPassNum: '111'},{name: '劳动能力再次鉴定',oneToFour: '111',fiveToSix: '111',sevenToNine: '111',noLevel: '111',highLevel: '111',noChange: '111',littleChange: '111',largeChange: '111',passNum: '111',noPassNum: '111'}],total: 0},}},methods: {}})</script><style scoped>// 表格斜线样式 注意：为保持其他页面用的表格样式，style 加scoped属性.doubleThTable .el-table thead.is-group tr:first-of-type th:first-of-type{border-bottom: none;}.doubleThTable .el-table thead.is-group tr:first-of-type th:first-of-type:before{content: '';position: absolute;width: 1px;height: 87px; /*这里需要自己调整，根据td的宽度和高度*/top: 0;left: 0;background-color: grey;opacity: 0.2;display: block;transform: rotate(-52deg); /*这里需要自己调整，根据线的位置*/transform-origin: top;}.doubleThTable .el-table thead.is-group tr:last-of-type th:first-of-type:before {content: '';position: absolute;width: 1px;height: 115px; /*这里需要自己调整，根据td的宽度和高度*/bottom: 0;right: 0;background-color: grey;opacity: 0.2;display: block;transform: rotate(-51deg); /*这里需要自己调整，根据线的位置*/transform-origin: bottom;}</style></html>
