el-table合并表头handerMethod

项目中使用element的table表格，总是需要一些自定义的要求，虽然element已经提供了很多方法，但是如何使用还是需要自己探索

先上效果截图

这里主要使用到:header-cell-style="handerMethod"和:span-method="spanMethod"用来合并行和列

主要代码包括:

//隐藏表头
 handerMethod({ row, column, rowIndex, columnIndex }) {
   if (row[0].level == 1) {
     //这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效
     row[0].colSpan = 0
     row[1].colSpan = 2
     if (columnIndex === 0) {
       return { display: 'none' }
     }
   }
 },
 //合并列
 spanMethod({ row, column, rowIndex, columnIndex }) {
   if (columnIndex === 0) {
     if (column.property === 'name') {
       if (rowIndex !== 0) {
         return { display: 'none' }
       } else {
         return { rowspan: 5, colspan: 1 }
       }
     } else {
       return { rowspan: 1, colspan: 1 }
     }
   }

这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效 我也是试了很多次才得出这个结论

合并表头代码思路是将两个列通过handerMethod隐藏第一列的同时，让第二列占据两个单元格的宽度来实现合并效果

提供el-table完整代码

<el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="handerMethod"
        :span-method="spanMethod"
        height="900"
        border
        row-class-name="riskList-row"
        cell-class-name="riskList-cell"
        header-row-class-name="riskList-headerRow"
        header-cell-class-name="riskList-headerCell"
      >
        <el-table-column
          prop="name"
          label="风险等级"
          width="100"
          :resizable="false"
        >
        </el-table-column>
        <el-table-column
          prop="level"
          label="风险等级"
          width="400"
          :resizable="false"
        >
        </el-table-column>
        <el-table-column label="后果" :resizable="false">
          <el-table-column label="影响特别重大" width="320" :resizable="false">
            <template slot-scope="scope">
              <div class="table_item" :style="customState(scope.row.level_1)">
                {{ scope.row.level_1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="影响重大" width="320" :resizable="false">
            <template slot-scope="scope">
              <div class="table_item" :style="customState(scope.row.level_2)">
                {{ scope.row.level_2 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="影响较大" width="320" :resizable="false">
            <template slot-scope="scope">
              <div class="table_item" :style="customState(scope.row.level_3)">
                {{ scope.row.level_3 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="影响一般" width="320" :resizable="false">
            <template slot-scope="scope">
              <div class="table_item" :style="customState(scope.row.level_4)">
                {{ scope.row.level_4 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="影响很小" width="320" :resizable="false">
            <template slot-scope="scope">
              <div class="table_item" :style="customState(scope.row.level_5)">
                {{ scope.row.level_5 }}
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

文章来源：el-table合并表头handerMethod