- 需求说明:
1. 合并相同项单元格
2. 部分单元格合并需要额外叠加条件
3. 可动态增减
- 实现思路
通过倒序遍历数组,符合条件时使用combineProp进行累加,并设置当前单元格属性rowspan和colspan为0,直到不符合条件后对当前项rowspan进行赋值
- 实现效果
- 完整代码地址
https://github.com/lolStoneLee/mergeTable.git- 合并逻辑代码
- 合并代码如下
........
data:{
return() {
dataList: []
}
},
methods: {
mergeData( list ) {
// mergeTarge - 合并项依据
// combineProp - 根据mergeTarge 进行合并的单元格属性
let config = {
mergeTarget: 'id', // 通用依据
combineProp: [
'id',
'name',
{
mergeTarget: 'name',