Vue ElementUI table通过改css样式实现斜线表头

效果预览

实现原理

通过改css样式实现

1. 去掉第一个单元格的下边框
2. 第一列第一个单元格和第二个单元格的伪元素设置绝对定位，宽度设成1px,高度根据自己表格调整
3. 通过旋转两个单元格伪元素，并设置旋转起始点，使两个伪元素旋转到重合位置，达到斜线的效果

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>

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

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