在elementUI合并单元格文章中讲述了原理，这里将探讨的是具体的写法。知道原理了，自然就好处理了。使用的方法是根据真实业务需要，合并的最后一列相同数据的写法。
处理的思路就是当前行要判断下一行是否要合并，下下行是否要合并，下下下行是否要合并。这里就抽象出了递归的思路。
通过span-method="arraySpanMethod" 该方法返回的对象包含的四个属性row, column, rowIndex, columnIndex，就可以帮助我们解决这个问题。
通过判断column属性中的property属性是否对应的el-table-colum设置的prop。这里就能确定最后一列了。然后我们需要就是判断下一行数据中最后一列是否和当前行最后一列值相同（因为值相同就合并嘛），然后是下下行，下下下行，一直找到都相同的最后的索引，记住这里找的是索引。我这里递归函数找到的索引都是相同值索引的下一个下标（你可以想一下为什么）。上代码
arraySpanMethod({row, column, rowIndex, columnIndex}) {
console.log(column, row)
if (column.property === 'spareAmountAll' && (!row.isFilled)) {
// 返回的找到最大要合并的索引
let index = this.recursionFindIndex(row.spareAmountAll, +rowIndex + 1)
// 最大合并的索引-当前索引就是合并的个数
let resetNum = index - rowIndex
return [resetNum, 1]
} else if (column.property === 'spareAmountAll' && row.isFilled) {
return [0, 0]
}
},
// 递归寻找符合条件的索引
recursionFindIndex(val, index) {
// 边界判断，超出则返回索引，如果执行到else 说明里面判断结果都为true，但是还是要返回一个index，就由外层返回。
if (this.list[index]) {
// 判断当前索引对应的数组中数据是否满足条件，满足条件则给原数组增加一个字段，并继续递归调用，直到不满足条件返回索引。
if (this.list[index]['spareAmountAll'] === val) {
this.$set(this.list[index], 'isFilled', true)
return this.recursionFindIndex(val, index + 1)
} else {
return index
}
} else {
return index
}
}上面是完整代码，当递归调用后得到的索引和当前索引相减，得到的就是要合并的数量。这里我们能够实现合并的代码了，还有一个问题就是被合并的的单元格应该返回的值是[0,0],上一篇原理文章讲述了原因，这里就不赘述了。所以在递归的过程中，我们知道该行数据是要合并的（通过判断值是否相等），就给该行数据中添加一个字段，代码中使用的是isFilled字段。然后在arraySpanMethod函数中就有了判断的条件了。如果该列是最后一列，并且数据中isFilled字段是false结果，表示这一行开始要判断是否需要合并，那么需要递归查找，查找索引，计算出合并的个数，如果当前是最后一列并且数据isFilled值是true，代表该表格应该是不被渲染的返回[0,0]。这样就完成了根据数据动态的完成表格合并的方法。
