-
需求说明：
- 合并相同项单元格
- 部分单元格合并需要额外叠加条件
- 可动态增减
实现思路
通过倒序遍历数组，符合条件时使用combineProp进行累加，并设置当前单元格属性rowspan和colspan为0，直到不符合条件后对当前项rowspan进行赋值-
实现效果：
合并逻辑代码
........
data:{
return() {
dataList: []
}
},
methods: {
mergeData( list ) {
// mergeTarge - 合并项依据
// combineProp - 根据mergeTarge 进行合并的单元格属性
let config = {
mergeTarget: 'id', // 通用依据
combineProp: [
'id',
'name',
{
mergeTarget: 'name',
combineProp: ['amount1','amount2']
},
'amount3'
]
}
return this.filterData( config, [].concat(list) )
},
filterData( config, dataList, targetProp ) {
const { mergeTarget, combineProp } = config
// 叠加的合并条件
combineProp.forEach((column, index) => {
// 记录合并项
let combineCount = 1
if( this.isObject( column ) ) {
return this.filterData.call(this, column, dataList, mergeTarget)
}
// 使用倒序遍历
for(let i = dataList.length -1; i >= 0 ; i--) {
let curr = dataList[i],
prev = dataList[i-1]
if(this.isEmpty(prev)) {
// 已经循环完毕
curr[`${column}-span`] = {
rowspan: combineCount,
colspan: combineCount >= 1 ? 1 : 0
}
break;
}
if( ( prev[targetProp] === curr[targetProp] &&
prev[mergeTarget] === curr[mergeTarget] ) &&
prev[`${column}`] === curr[`${column}`]
) {
++combineCount;
curr[`${column}-span`] = {
rowspan: 0,
colspan: 0
}
} else {
curr[`${column}-span`] = {
rowspan: combineCount,
colspan: combineCount >= 1 ? 1 : 0
}
prev[`${column}-span`] = {
rowspan: 1,
colspan: 1,
}
// 前后项不相符时，对combinecount进行重置
combineCount = 1
}
}
})
return dataList
},
}
.......
