element 表格table纵横双列表头 斜线样式处理和多级表头循环
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/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-column label="项目" align="right" width="150"> <el-table-column prop="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="https://unpkg.com/vue/dist/vue.js"></script> <!-- import JavaScript --> <script src="https://unpkg.com/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>