Vue ElementUI table给表格一个斜线分隔线

效果：

实现：
通过改css样式实现

1、去掉第一个单元格的下边框/
2、第一列第一个单元格和第二个单元格的伪元素设置绝对定位，宽度设成1px,高度根据自己表格调整
3、通过旋转两个单元格伪元素，并设置旋转起始点，使两个伪元素旋转到重合位置，达到斜线的效果

代码：
1、html

<el-table:data="tableData3"style="width: 100%"><el-table-columnlabel="医疗机构"align="right"width="150"><el-table-columnprop="name"label="收费项目"width="120"></el-table-column></el-table-column><el-table-columnv-for="(item,index) of mechanism":label="item"align="center":key="item"width="120"><el-table-columnlabel="次数"align="center"width="120"><template slot-scope="scope">{{scope.row.mechanism[index].frequency}}</template></el-table-column><el-table-columnlabel="费用"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}]}]

Vue ElementUI table给表格一个斜线分隔线相关推荐

Antd给表格一个斜线分隔（通过css改变）
react 代码: const [columns,setColums] = useState([// 主要代码title: <div style={{ "position": ...
Antd给表格一个斜线分隔
代码: const [columns,setColums] = useState([// 主要代码title: <div style={{ "position": " ...
Vue+ElementUI table表格分页
Vue+ElementUI table表格分页分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但 ...
vue+elementUI实现sku表格自动生成【效果图+源码】
vue+elementUI实现sku表格自动生成[效果图+源码] 先看一看效果图: 点击这里下载源码,下载后记得安装依赖:npm install
Excel单元格斜线分割线怎样插入？干货分享！如何将斜线分隔线加入单元格？
对于excel表格文件我们大家平时记录一些信息.数据经常会用的到,但是一些特殊的符号,斜线分割线应该怎样插入呢?下面小编分享给大家这一个小方法. 首先我们打开excel表格软件,进入需要编辑的表格当中 ...
antd table设置表格一个单元格的字体颜色_开源 UI 库中，唯一同时实现了大表格虚拟化和树表格的 Table 组件
背景有这样一个需求,一位 React Suite (以下简称 rsuite)的用户,他需要一个 Table 组件能够像 Jira Portfolio 一样,支持树形数据,同时需要支持大数据渲染. 截 ...
使用纯CSS3创建一个纺锤形分隔线
纺锤形分割线用于仿真纸中间被剪开时的阴影效果,也就是中间咧开而两边收拢的情况. 简单讲就是两头小,中间大.如下所示(请忽略中间的wow图标): 使用CSS3来实现这种效果,可以使用border-rad ...
vue element-ui table表格自定义纵向合计横向合计
1表格横向数据合计表格代码 <el-table-column prop="" label="合计"><template slot-scope ...
vue+elementui Table组件splice删除表格总是删除最后一行
原因是没有给table下面的row加key,才导致的问题解决方法: 在 el-table 标签里加一个 row-key 属性 <el-table :data="tableData& ...

Vue ElementUI table给表格一个斜线分隔线

Vue ElementUI table给表格一个斜线分隔线相关推荐

最新文章

热门文章