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
            }
          ]
        }
      ]