Vue?ElementUI?table實現(xiàn)表格斜線分隔線

更新時間：2022年03月21日 15:43:35 作者：前端江太公

這篇文章主要為大家詳細介紹了Vue?ElementUI?table實現(xiàn)表格斜線分隔線，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue ElementUI table給表格一個斜線分隔線的具體代碼，供大家參考，具體內(nèi)容如下

效果：

實現(xiàn)：

通過改css樣式實現(xiàn)

1、去掉第一個單元格的下邊框/
2、第一列第一個單元格和第二個單元格的偽元素設(shè)置絕對定位，寬度設(shè)成1px,高度根據(jù)自己表格調(diào)整
3、通過旋轉(zhuǎn)兩個單元格偽元素，并設(shè)置旋轉(zhuǎn)起始點，使兩個偽元素旋轉(zhuǎn)到重合位置，達到斜線的效果

代碼：

1、html

<el-table
? ? :data="tableData3"
? ? style="width: 100%">
? ? <el-table-column
? ? ? label="醫(yī)療機構(gòu)"
? ? ? 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="次數(shù)"
? ? ? ? ? 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; /*這里需要自己調(diào)整，根據(jù)td的寬度和高度*/
? ? top: 0;
? ? left: 0;
? ? background-color: grey;
? ? opacity: 0.3;
? ? display: block;
? ? transform: rotate(-53deg); /*這里需要自己調(diào)整，根據(jù)線的位置*/
? ? transform-origin: top;
? }
? .el-table thead.is-group tr:last-of-type th:first-of-type:before {
? ? content: '';
? ? position: absolute;
? ? width: 1px;
? ? height: 75px; /*這里需要自己調(diào)整，根據(jù)td的寬度和高度*/
? ? bottom: 0;
? ? right: 0;
? ? background-color: grey;
? ? opacity: 0.3;
? ? display: block;
? ? transform: rotate(-54deg); /*這里需要自己調(diào)整，根據(jù)線的位置*/
? ? transform-origin: bottom;
? ? // background:red;
? }

3、js

mechanism: ['醫(yī)療機構(gòu)A', '醫(yī)療機構(gòu)B', '醫(yī)療機構(gòu)C', '醫(yī)療機構(gòu)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
? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? ? }
? ? ? ]

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: