转载：elementuitable:spanmethod（行合并）

 element-ui官网中关于行合并的例子是根据行号进行合并的&＃xff0c;这显然不符合我们日常开发需求&＃xff0c;因为通常我们table中的数据都是动态生成的&＃xff0c;所以需要做一些修改。我们首先解读一下官网实例中的各参数的意义&＃xff1a;

objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex &＃61;&＃61;&＃61; 0) { //用于设置要合并的列if (rowIndex % 2 &＃61;&＃61;&＃61; 0) { //用于设置合并开始的行号return {rowspan: 2,　　　　　//合并的行数colspan: 1          //合并的列数&＃xff0c;设为&＃xff10;则直接不显示};} else {return {rowspan: 0,colspan: 0};}}}

    研究这个例子后不难发现&＃xff0c;实现合并行的方法其实在每一行数据渲染的时候都会执行&＃xff0c;只不过在渲染过程中我们设置了它合并的行数和列数&＃xff0c;以得到不同的效果。所以我们需要生成一个与行数相同的数组记录每一行设置的合并数。处理过程如下&＃xff1a;

getSpanArr(data) {　for (var i &＃61; 0; i },

data就是我们从后台拿到的数据&＃xff0c;通常是一个数组&＃xff1b;spanArr是一个空的数组&＃xff0c;用于存放每一行记录的合并数&＃xff1b;pos是spanArr的索引。上述代码意思是&＃xff1a;如果是第一条记录&＃xff08;索引为&＃xff10;&＃xff09;&＃xff0c;向数组中加入&＃xff11;&＃xff0c;并设置索引位置&＃xff1b;如果不是第一条记录&＃xff0c;则判断它与前一条记录是否相等&＃xff0c;如果相等&＃xff0c;则向spanArr中添入元素&＃xff10;&＃xff0c;并将前一位元素&＃xff0b;&＃xff11;&＃xff0c;表示合并行数&＃xff0b;&＃xff11;&＃xff0c;以此往复&＃xff0c;得到所有行的合并数&＃xff0c;&＃xff10;即表示该行不显示。

cellMerge({ row, column, rowIndex, columnIndex }) {if (columnIndex &＃61;&＃61;&＃61; 0) {const _row &＃61; this.spanArr[rowIndex];const _col &＃61; _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col}}
},

然后根据得到的数组spanArr对表格进行合并渲染&＃xff0c;并绑定合并方法

......