Element-UI的Table表头合并

一、效果图

1、原图效果

2、目标效果

二、实现思路

1、表头第一行的第一列占零格，表头第一行的第二列占两格

2、表头第一行的第一列隐藏

三、完整代码

<el-table :header-cell-style="headerStyle">

headerStyle({row, column, rowIndex, columnIndex}) {
  if (rowIndex === 0) {
    row[1].colSpan = 2 //第二个表头占两格
    row[0].colSpan = 0 //第一个表头占零格
  }
  if (rowIndex === 0 && columnIndex === 0) { //隐藏第一个表头
    return 'display: none'
  }
  return {background: '#c0c4cc', color: '#000', fontSize: '12px'};
}