el-table多级表头，合并表头，设置样式

使用框架 vue3 element-plus

 html代码。多级表头请阅读官网

地址：element-plus

<el-table :data="tableData" style="width: 100%" :header-cell-style="handerMethod" :span-method="arraySpanMethod">
      <el-table-column prop="manufactureCode" >
        <template #header>
          <p>工程代码：{{tableHead.epcCode}}</p>
          <p>工程名称：{{tableHead.epcName}}</p>
          <p>生产指示日期：{{tableHead.indicateTime}}</p>
          <p> 最大生产能力：{{tableHead.capacity}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="manufactureName" label=""></el-table-column>
      <el-table-column label="便次">
        <el-table-column prop="manufactureNumber" label="生产开始时间"></el-table-column>
      </el-table-column>
      <el-table-column :label="tableHeadNum[index]" v-for="(item,index) in tableHeadTime">
        <el-table-column :prop="item" :label="tableHeadTime[index]"></el-table-column>
      </el-table-column>    
    </el-table>

js代码。vue3 setup 

// 合并单元格
const arraySpanMethod = ( row:any)=>{
  // console.log(row)
  if(row.rowIndex == 0 && row.columnIndex == 0){
  }
}

//隐藏表头,合并表头
const handerMethod = (row:any)=>{
  console.log(row)
  // 第一级表头
  if (row.row[0].level == 1) {
    // 合并第一列，第二列（第一列的列宽是2，第二列的列宽是0）
    row.row[0].colSpan = 2
    row.row[1].colSpan = 0
    // 隐藏第二列的表头
    if (row.columnIndex === 1) {
      return { display: 'none' }
    }
    // 设置第一列表头的样式
    if(row.columnIndex === 0){
      return { backgroundColor: '#1f5fa0',color:"#fff" }
    }
    // 设置其他列表头的样式
    if(row.columnIndex !== 0){
      return { backgroundColor: '#143f6a',color:"#fff" }
    }
  }else{
    // 其他级别表头样式
    return { backgroundColor: '#143f6a',color:"#fff" }
  }
}

用来记录