ElementUI Table组件如何使用合并行或列功能深入解析

需求,对指定的列表展示进行合并单元格,循环展示指定行和指定列。

1.官方文档

通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。

1.2.两种返回方法

<el-table :data="reportList" :span-method="arraySpanMethod" resource="admin-users">

其实就是两种返回值的形式,本文章只用数组形式的返回举例

methods: {
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        //如果当前是第一行。因为下标从0开始,所以第一行的下标能被整除。
        if (rowIndex % 2 === 0) {
          //如果当前列是第一行第一列,合并1行,和2列
          if (columnIndex === 0) {
            return [1, 2];
          } else if (columnIndex === 1) {
            //如果当前列是第一行第二列,把值清除。注意,不清除的话,值会在后面一列展示,影响布局。
            return [0, 0];
          }
        }
      },
}

数组第一个元素代表rowspan(要合并的行数),第二个元素代表colspan(要合并的列数)

1.3 四个传入参数

该方法接收四个传入参数,当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。这4个属性对我们定制化合并单元格很有帮助。要注意的是,行号和列号都是从0开始网上递增的。

1.4深入理解返回值的意义

想要做好合并,首先我们要理解如何合并,以及合并后的数据是如何进行处理的。以数组为例,Element接收第一个参数rowspan和第二个参数colspan,然后根据返回的值进行合并。


image.png

如图,如果想将左边的列合并单元格成右边的列,那么只需要在数组中返回return [1,2]就行了,表示合并一行两列。
代码如下:

methods: {
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        //如果是第一列
        if (columnIndex === 0||columnIndex ===1) {
          //如果当前单元格是第一列和第二列的第一行,进行向下合并单元格
              if (rowIndex % 2 === 0) {
                  return [1, 2];
              }else {
                  //如果当前单元格是第一列和第二列的第二行,值置空(不置空则重复值会存在并向后一行展示,影响布局)
                  return [0, 0];
              }  
        }
      },
}

1.5为什么需要置空操作以及不需要合并的单元格需要控制吗?

先回答后面一个问题,不需要合并操作的单元格不用控制,return[1,1]这种操作不需要。因为单元格就是原子的,是代码控制的最小单位。
置空操作则需要反推下:如果不置空的话有什么影响?


image.png

图片仅作示意,并非真实情况。
首先我们要知道,当我们合并单元格时,系统并不会把两个单元格的值拼接在一个单元格里。而是会取第一个单元格的值。
Element在操作单元格时,也是取第一个单元格的值,但是不会将第二个单元格的值置空,这就会导致如上图的情况。即,合并是成功了,多出的值没有做处理。
因此,我们需要手动处理,定位到被合并的行或者列,将其值置为空,即返回[0,0]。

2 注意事项

2.1:当我们使用置空操作时一定要注意范围问题,避免不小心,将其他的无辜的值也给置空了。举例如下

methods: {
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        //如果是第一列
        if (columnIndex === 0||columnIndex ===1) {
          //如果当前单元格是第一列和第二列的第一行,进行向下合并单元格
              if (rowIndex % 2 === 0) {
                  return [1, 2];
              }
        }else {
                  //错误操作
                  return [0, 0];
        }  
      },
}

可以看到,如果像上面那样进行返回,那么除了第一列和第二列,所有的单元格都会被置空。布局突然错乱,可能就是作用域有问题,要认真检查。

2.2 巧用%进行换行合并操作
使用取余函数,可以帮我们确定要操作的行和列,对合并单元格非常有用。

2.3 使用填充法进行不规则表格填充
当我们每个第二行需要自定义表头时,可以将值定位固定值,利用合并单元格的特性,删除重复的固定值。即可进行不规则填充,如下图。


image.png

当然,如果是需要小计功能,有单独的方法,我这个只针对自定义第二行的表头。