elementUI table 合并表头

菜鸟
  • 73

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

我想要实现的效果
image.png

这是我的代码
image.png

回复
阅读 682
2 个回答
边城
  • 54.8k

合并表头

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

image.png

<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 周年「问答」打卡 ,欢迎正在阅读的你也加入。
宣传栏