VueElementUItable通过改css样式实现斜线表头效果预览
实现原理
通过改css样式实现
1. 去掉第⼀个单元格的下边框
2. 第⼀列第⼀个单元格和第⼆个单元格的伪元素设置绝对定位，宽度设成1px,⾼度根据⾃⼰表格调整
3. 通过旋转两个单元格伪元素，并设置旋转起始点，使两个伪元素旋转到重合位置，达到斜线的效果HTML代码css表格样式
<el-table
:data="tableData3"
>
<el-table-column
label="医疗机构"
align="right"
width="150">
<el-table-column
prop="name"
label="收费项⽬"
width="120">
</el-table-column>
</el-table-column>
<el-table-column
v-for="(item,index) of mechanism"
:label="item"
align="center"
:key="item"
width="120">
<el-table-column
label="次数"
align="center"
width="120">
<template slot-scope="scope">
{{hanism[index].frequency}}
</template>
</el-table-column>
<el-table-column
label="费⽤"
align="center"
width="120">
<template slot-scope="scope">
{{hanism[index].cost}}
</template>
</el-table-column>
</el-table-column>
</el-table>
Css代码
.el-table thead.is-group th {
background: none;
}
.el-table thead.is-group tr:first-of-type th:first-of-type {
border-bottom: none;
}
.el-table thead.is-group tr:first-of-type th:first-of-type:before {
content:'';
position: absolute;
width:1px;
height:75px;/*这⾥需要⾃⼰调整，根据td的宽度和⾼度*/
top:0;
left:0;
background-color: grey;
opacity:0.3;
display: block;
transform:rotate(-53deg);/*这⾥需要⾃⼰调整，根据线的位置*/    transform-origin: top;
}
.
el-table thead.is-group tr:last-of-type th:first-of-type:before {
content:'';
position: absolute;
width:1px;
height:75px;/*这⾥需要⾃⼰调整，根据td的宽度和⾼度*/
bottom:0;
right:0;
background-color: grey;
opacity:0.3;
display: block;
transform:rotate(-54deg);/*这⾥需要⾃⼰调整，根据线的位置*/    transform-origin: bottom;
/
/ background:red;
}
Js代码
mechanism:['医疗机构A','医疗机构B','医疗机构C','医疗机构D'],      tableData3:[
{
name:'项⽬A',
mechanism:[
{
frequency:8,
cost:1000
},
{
frequency:9,
cost:2000
},
{
frequency:10,
cost:3000
},
{
frequency:11,
cost:4000
}
]
},
{
name:'项⽬B',
mechanism:[
{
frequency:3,
cost:3001
},
{
frequency:4,
cost:2002
},
{
frequency:5,
cost:2003
},
{
frequency:6,
cost:2004
}
]
}
]

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。