运维开发网

实现表斜杠分隔符

运维开发网 https://www.qedev.com 2022-05-27 14:52 出处:网络
这篇文章主要为大家详细介绍了Vue?ElementUI?table实现表格斜线分隔线,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

效果:


实现:

通过改变css样式。

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

代码:

1、html

lt;el-table? ? :data="tableData3"? ? style="width: 100%"gt;? ? lt;el-table-column? ? ? label="医疗机构"? ? ? align="right"? ? ? width="150"gt;? ? ? ?lt;el-table-column? ? ? ? prop="name"? ? ? ? label="收费项目"? ? ? ? width="120"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"? ? ? ? width="120"gt;? ? ? ? lt;el-table-column? ? ? ? ? label="次数"? ? ? ? ? align="center"? ? ? ? ? width="120"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"? ? ? ? ? width="120"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: '';? ? 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? ? ? ? ? ? }? ? ? ? ? ]? ? ? ? }? ? ? ]

这就是本文的全部内容。

0

精彩评论

暂无评论...
验证码 换一张
取 消