elementUI table 合并表头

Question

合并表头，中间的合并，红色框起来的地方改为 ‘基本信息’合并中间三行，‘类别’只显示最后一行 。第二张图的样式

我想要实现的效果

这是我的代码

Answer 1

官网已提供了合并的方法：合并行或列

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

合并表头

官方示例，合并行，合并列都有

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column label="对比分组">
      <el-table-column label="基本信息">
        <el-table-column label="类别" prop="date"></el-table-column>
      </el-table-column>
    </el-table-column>
    <el-table-column label="对比组1">
        <el-table-column label="一">
            <el-table-column label="二">
                <el-table-column label="三">
                   <el-table-column prop="province" label="省份" width="120"></el-table-column>
                </el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column label="第二行">
        <el-table-column label="第三行">
            <el-table-column label="第四行">
                <el-table-column prop="province" label="省份" width="120"></el-table-column>
              <el-table-column prop="city" label="市区" width="120"></el-table-column>
              <el-table-column prop="address" label="地址" width="300"></el-table-column>
              <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
            </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

合并单元各

使用 :span-method 指定一个合并方法，然后在这个方法中判断是否合并，这里有官方示例

简单地说，spanMethod 中根据参数 ({ row, rowIndex, column, columnIndex }) 来判断当前单元格是否合并，合并大小是多大，然后

• return 一个数组，或者对像来表示合并信息

  • 数组形式：[colSpan, rowSpan]
  • 对象形式：{ colspan, rowspan }（注意都是小写）
• 对被合并掉的单元格，return [0, 0] 或 return { colspan: 0, rowspan: 0 }
• 对不需要合并的单元格，不作特殊处理，return undefined 或者默认 return 即可。

---

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。