实现表斜杠分隔符

这篇文章主要为大家详细介绍了Vue?ElementUI?table实现表格斜线分隔线，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文分享了Vue ElementUI表格给表格加斜线的具体代码，供大家参考。具体内容如下

效果:

实现：

通过改变css样式。

1.删除第一个单元格的下边框/ 2。设置第一列第一个和第二个单元格的伪元素的绝对位置，宽度设置为1px。根据自己的桌子调整高度 3。旋转两个单元格的伪元素，设置旋转起点，使两个伪元素旋转到重叠的位置，从而达到对角线效果。

代码：

1、html

lt;el-table? ? :data="tableData3"? ? gt;? ? lt;el-table-column? ? ? label="医疗机构"? ? ? align="right"? ? ? gt;? ? ? ?lt;el-table-column? ? ? ? prop="name"? ? ? ? label="收费项目"? ? ? ? gt;? ? ? lt;/el-table-columngt;? ? lt;/el-table-columngt;? ? ? lt;el-table-column? ? ? ? v-for="(item,index) of mechanism"? ? ? ? :label="item"? ? ? ? align="center"? ? ? ? :key="item"? ? ? ? gt;? ? ? ? lt;el-table-column? ? ? ? ? label="次数"? ? ? ? ? align="center"? ? ? ? ? gt;? ? ? ? ? lt;template slot-scope="scope"gt;? ? ? ? ? ? {{scope.row.mechanism[index].frequency}}? ? ? ? lt;/templategt;? ? ? ? lt;/el-table-columngt;? ? ? ? lt;el-table-column? ? ? ? ? label="费用"? ? ? ? ? align="center"? ? ? ? ? gt;? ? ? ? ? lt;template slot-scope="scope"gt;? ? ? ? ? ? {{scope.row.mechanism[index].cost}}? ? ? ? lt;/templategt;? ? ? ? lt;/el-table-columngt;? ? ? lt;/el-table-columngt;? lt;/el-tablegt;

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: &＃39;&＃39;;? ? 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: &＃39;&＃39;;? ? 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: [&＃39;医疗机构A&＃39;, &＃39;医疗机构B&＃39;, &＃39;医疗机构C&＃39;, &＃39;医疗机构D&＃39;],? ? ? tableData3: [? ? ? ? {? ? ? ? ? name: &＃39;项目A&＃39;,? ? ? ? ? mechanism: [? ? ? ? ? ? {? ? ? ? ? ? ? frequency: 8,? ? ? ? ? ? ? cost: 1000? ? ? ? ? ? },? ? ? ? ? ? {? ? ? ? ? ? ? frequency: 9,? ? ? ? ? ? ? cost: 2000? ? ? ? ? ? },? ? ? ? ? ? {? ? ? ? ? ? ? frequency: 10,? ? ? ? ? ? ? cost: 3000? ? ? ? ? ? },? ? ? ? ? ? {? ? ? ? ? ? ? frequency: 11,? ? ? ? ? ? ? cost: 4000? ? ? ? ? ? }? ? ? ? ? ]? ? ? ? },? ? ? ? {? ? ? ? ? name: &＃39;项目B&＃39;,? ? ? ? ? mechanism: [? ? ? ? ? ? {? ? ? ? ? ? ? frequency: 3,? ? ? ? ? ? ? cost: 3001? ? ? ? ? ? },? ? ? ? ? ? {? ? ? ? ? ? ? frequency: 4,? ? ? ? ? ? ? cost: 2002? ? ? ? ? ? },? ? ? ? ? ? {? ? ? ? ? ? ? frequency: 5,? ? ? ? ? ? ? cost: 2003? ? ? ? ? ? },? ? ? ? ? ? {? ? ? ? ? ? ? frequency: 6,? ? ? ? ? ? ? cost: 2004? ? ? ? ? ? }? ? ? ? ? ]? ? ? ? }? ? ? ]

这就是本文的全部内容。