el-table怎么合并表头

通过设置多级表头,以及设置表头单元格样式来隐藏下级表头来展示合并表头效果,

组件内部会遍历所有的表头单元格,并调用传入的回调,回调中会传入一个对象,包含单元格的位置信息, 通过位置信息判断需要隐藏的单元格,设置样式隐藏即可, 具体代码如下

        // 结构
        <el-table 
          :data="senceData"
          :header-cell-style="mergeHeaderMethod"  // 设置样式
          style="width: 100%"
        >
          <!-- el-table-column组件嵌套实现多级表头效果 -->
          <el-table-column prop="" align="center" label="热门场景">
            <el-table-column prop="label" label=""></el-table-column>
            <el-table-column prop="value" label=""></el-table-column>
          </el-table-column>
        <el-table>
        
        // js
        const senceData = ref([
          {label: '123', value: '33'},
          {label: '', value: '222'}
        ])
        // 组件内部会遍历所有的表头单元格,并调用传入的回调,回调中会传入一个对象,包含单元格的位置信息
        // 通过位置信息判断需要隐藏的单元格,设置样式隐藏即可
        const mergeHeaderMethod = ({row, column, rowIndex, columnIndex}) => {
          if(rowIndex === 1) return { display: 'none' }
        }

效果