Vue ElementUI table给表格一个斜线分隔线 |
您所在的位置：网站首页 › elementui合并表头 › Vue ElementUI table给表格一个斜线分隔线 |
Vue ElementUI table给表格一个斜线分隔线
|
效果： 1、去掉第一个单元格的下边框/ 2、第一列第一个单元格和第二个单元格的伪元素设置绝对定位，宽度设成1px,高度根据自己表格调整 3、通过旋转两个单元格伪元素，并设置旋转起始点，使两个伪元素旋转到重合位置，达到斜线的效果 代码： 1、html {{scope.row.mechanism[index].frequency}} {{scope.row.mechanism[index].cost}}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 } ] } ] |
实现： 通过改css样式实现【本文地址】
今日新闻 |
推荐新闻 |