Vue ElementUI table实现表格斜线分隔线
作者：前端江太公
这篇文章主要为大家详细介绍了Vue ElementUI table实现表格斜线分隔线，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue ElementUI table给表格一个斜线分隔线的具体代码，供大家参考，具体内容如下
效果：
实现：
通过改css样式实现
1、去掉第一个单元格的下边框/
2、第一列第一个单元格和第二个单元格的伪元素设置绝对定位，宽度设成1px,高度根据自己表格调整
3、通过旋转两个单元格伪元素，并设置旋转起始点，使两个伪元素旋转到重合位置，达到斜线的效果
代码：
1、html
<el-table
:data="tableData3"
style="width: 100%">
<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">
{{scope.row.mechanism[index].frequency}}
</template>
</el-table-column>
<el-table-column
label="费用"
align="center"
width="120">
<template slot-scope="scope">
{{scope.row.mechanism[index].cost}}
</template>
</el-table-column>
</el-table-column>
</el-table>2、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;
}3、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
}
]
}
]以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。