element 表格table纵横双列表头 斜线样式处理和多级表头循环
element 表格table纵横双列表头 斜线样式处理和多级表头循环
<html>
<head>
<meta charset="UTF-8">
<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>
<script src="https://unpkg.com/vue/dist/vue.js">script>
<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>
// 表格斜线样式 注意：为保持其他页面用的表格样式，给本页表格或父级设置一个class
.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>