Vue ElementUI table給表格一個斜線分隔線
阿新 • • 發佈:2021-04-24
效果:
實現:
通過改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
}
]
}
]