ElementUI表格组件合并行或列

介绍

1. 官方文档

合并行或列的方法官方文档为：

参数	说明	类型	可选值	默认值
span-method	合并行或列的计算方法	Function({ row, column, rowIndex, columnIndex })	——	——

通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，四个参数row、column、rowIndex、columnIndex分别为当前行、当前列、当前行索引和当前列索引。

2. 两种返回方式

数组：

[1, 2] // 合并1行，2列

对象：

{
    rowspan: 3, // 合并3行
    colspan: 1  // 合并1列
}

3. 表格渲染顺序

从第一行开始，rowIndex为0，列从左到右（columnIndex从0到最后一列）；然后第二行，rowIndex为1，列从左到右……

4. 置空操作

合并单元格时，系统会取第一个单元格的值。Element在操作单元格时，也是取第一个单元格的值，但是不会将第二个单元格的值置空，这就会导致多出的值没有做处理，因此，我们需要手动处理，定位到被合并的行或者列，将其值置为空，即返回 [0, 0] 。

Demo分享

先展示一下效果

demo1

demo2

Demo1(分别合并行或列）

demo2