element-ui table中span-method（行合并）方法使用

最新推荐文章于 2025-05-29 19:00:00 发布

原创最新推荐文章于 2025-05-29 19:00:00 发布 · 5.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #tablet #javascript

本文介绍如何使用Element UI中的span-method方法实现表格单元格的合并，并提供了具体的代码示例。通过设置不同的rowspan和colspan值，可以灵活地控制单元格的合并方式。

[官方文档span-method方法](https://element.eleme.cn/#/zh-CN/component/table#table-attributes)中给的例子是第一列每两行进行合并。
方法中传入的参数有四个，在开发中用到了rowIndex和columnIndex。

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        if (rowIndex === 0) {
          return {
            rowspan: 4,
            colspan: 1
          };
        } else if (rowIndex === 4) {
          return {
            rowspan: 5,
            colspan: 1
          };
        } else if (rowIndex === 9) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else if (rowIndex === 11) {
          return {
            rowspan: 4,
            colspan: 1
          };
        } else if (rowIndex === 15) {
          return {
            rowspan: 5,
            colspan: 1
          };
        } else if (rowIndex === 20) {
          return {
            rowspan: 3,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }

columnIndex为当前列，如代码块中判断columnIndex === 1是对第二列进行操作（index从0开始）；
rowIndex为当前行，如代码块中判断 rowIndex === 0是对第一行开始操作；
objectSpanMethod方法的返回值是两个，一个rowspan为合并的行数，一个colspan为合并的列数。除了代码块中return { rowspan: 4 ，colspan: 1}外，还可以写成数组，如return [4，1]；

对返回值个人理解：
return [0,0]为当前的单元格上下左右合并均为0，即删除该单元格；
return [2,1]为当前的单元格只向下合并2行；
return [1,2]为当前的单元格只向右合并2列；
return [1,1]为当前的单元格保持不变，不合并；

参考文档：https://blog.youkuaiyun.com/touhapppy/article/details/106037500
官方文档（table-attributes）
如数据是从后端传至前端，可参考文章：https://blog.youkuaiyun.com/qq_29468573/article/details/80742646