el-table后台接口返回数据动态合并单元格

在实际工作中，通常数据都是后台接口返回的，有时需要对数据进行合并，可利用el-table的span-method方法，结合数据处理，进行合并，如下实例

<el-table :data="dataTable"borderrow-key="id":span-method="objSpanMethod"
></el-table>

// 默认接受的参数{当前行的值，当前列的值，行的下标，列的下标}
// mergeArr：是表格的字段名集合,["name","age","sex"...]
// mergeObj: 是合并信息数据的对象
objSpanMethod({row,column,rowIndex,columnIndex}) {// 判断列的属性if( mergeArr.indexOf(column.property) !== -1 ) {// 判断值是不是为0 if (mergeObj[column.property][rowIndex]) {return [mergeObj[column.property][rowUndex],1]} else {// 如果为0，则为需要合并的行return [0,0]}}
}

// 处理数据
getSpanArr(data) {mergeArr.forEach((key,index) => {// 记录需要合并行的起始位置let count = 0// 记录每一列的合并信息mergeObj[key] = []data.forEach((item,index) => {// index === 0 表示数据为第一行，直接push一个1if (index===0) {mergeObj[key].push(1)} else {// 判断当前行是否与上一行的值相等，如果相等，在count记录的位置其值+1，表示当前行需要合并push一个0，作为占位if (item[key] === data[index-1][key] {mergeObj[key][count] += 1mergeObj[key].push(0)} else {count = indexmergeObj[key].push(1)}}})})
}