vue 多级表头及表头对角线

 

展示效果

HTML部分

  <el-table :data="tableData4" style=" 100%" customClass="table4">
    <el-table-column label="指标" align="right" width="90">
      <el-table-column prop="name" label="分配域"  width="90">
      </el-table-column>
    </el-table-column>
    <el-table-column v-for="(item,index) of mechanism4" :label="item.name"  
       align="center" :key="item" width="105">
      <el-table-column :label="item.mech1" align="center"  width="120">
        <el-table-column :label="item.mech2" align="center"  width="120">
          <template slot-scope="scope" style="background-color: chocolate;">  
             {{scope.row.mechanism[index]}} 
          </template>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>

　DATA部分

 data() {
    return {
      tableData4: [
        {
          name: '项目A',
          mechanism: [1,2,3,4,5,6]
        },
        {
          name: '项目B',
          mechanism: [7,6,5,4,3,1]
        }
      ],
      mechanism4: [
        {
          name: '第一列',
          mech1: '80-100',
          mech2: 80
        },
        {
          name: '第二列',
          mech1: '40-60',
          mech2: 55
        },
        {
          name: '第三列',
          mech1: '70-120',
          mech2: 110
        },
        {
          name: '第四列',
          mech1: '80-90',
          mech2: 80
        },
        {
          name: '第五列',
          mech1: '10-50',
          mech2: 30
        },
        {
          name: '第六列',
          mech1: '60-80',
          mech2: 73
        },
      ],
    }
  },

　　

CSS部分 （调试表格对角线）

<style>
    .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;
       1px;
      height: 180px; /*这里需要自己调整，根据td的宽度和高度*/
      top: 0;
      left: 0;
      background-color: grey;
      opacity: 0.3;
      display: block;
      transform: rotate(326deg); /*这里需要自己调整，根据线的位置*/
      transform-origin: top;
    }
    .el-table th {
      overflow: visible;
    }
</style>