本文实例为大家分享了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
? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? ? }
? ? ? ]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。