1. 程式人生 > 其它 >Vue ElementUI table給表格一個斜線分隔線

Vue ElementUI table給表格一個斜線分隔線

效果:
在這裡插入圖片描述
實現:
通過改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
            }
          ]
        }
      ]