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

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

1.官方文档

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

1.2.两种返回方法

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

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，然后根据返回的值进行合并。

如图，如果想将左边的列合并单元格成右边的列，那么只需要在数组中返回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]这种操作不需要。因为单元格就是原子的，是代码控制的最小单位。
置空操作则需要反推下：如果不置空的话有什么影响？

(图片仅作示意，并非真实情况。)
首先我们要知道，当我们合并单元格时，系统并不会把两个单元格的值拼接在一个单元格里。而是会取第一个单元格的值。
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 使用填充法进行不规则表格填充
当我们每个第二行需要自定义表头时，可以将值定位固定值，利用合并单元格的特性，删除重复的固定值。即可进行不规则填充，如下图。

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