我存粹记录，详细链接在 https://juejin.cn/post/6917460696414781454
通过遍历table数据比较前后两个元素是否相等 来构造一个 spanArr 数组存放rowspan，通过判断rowspan 来确定colspan的值
1.处理数据
//函数groupBy有两个形参，data 为 表格数据 ， params 为需要合并的字段
groupBy (data, params) {
const groups = {}
data.forEach(v => {
// 根据模拟数据 是通过a字段 来分组，获取data中的传入的params属性对应的属性值 ，放入数组中：["2222"]，再将属性值转换为json字符串：'["2222"]'
const group = JSON.stringify(v[params])
// 把group作为groups的key，初始化value，循环时找到相同的v[params]时不变
groups[group] = groups[group] || []
// 将对应找到的值作为value放入数组中
groups[group].push(v)
})
// 返回处理好的二维数组 （如果想返回groupBy形式的数据只返回groups即可）
return Object.values(groups)
}
2.构造控制合并的数组spanArr
构造一个SpanArr数组赋予rowspan，即控制行合并
--接收重构数组 let arr = []
--设置索引 let pos = 0
--控制合并的数组 this.spanArr = []
3.reduce处理spanArr数组
再使用reduce方法比较redata前后两个元素是否相等，相等的话spanArr中对应索引的元素的值+1，并且在其后增加一个0占位，否则的话增加一个1占位，并记录当前索引，往复循环，构造一个给 rowspan 取值判断合并的数组。不太明白的话一会解释，先上代码:
redata.reduce((old, cur, i) => {
// old 上一个元素 cur 当前元素 i 索引
if (i === 0) {
// 第一次判断先增加一个 1 占位 ，索引为0
this.spanArr.push(1)
pos = 0
} else {
if (cur === old) {
this.spanArr[pos] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
pos = i
}
}
return cur
}, {})
我们这一步的最终目的是构造spanArr，为了给rowspan判断合并。那么rowspan是怎么判断合并的呢？
image.png
4.返回最终结果
最后一步啦，根据官方给的方法把我们处理好的spanArr传给rowspan即可！
cellMerge ({ row, column, rowIndex, columnIndex }) {
// 第一列合并
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
}
5. 我的整体代码和实现效果
我实现的效果
image.png
// 数据
tableList:[
{ name: '111', b: '1', c: '2' ,spection:'特殊'},
{ name: '111', b: '2', c: '3' ,spection:'特殊'},
// { name: '111', b: '2', c: '3' ,spection:'特殊'},
{ name: '111', b: '2222', c: '3333' ,spection:'特殊' },
// { name: '111', b: '2222', c: '3333' ,spection:'特殊'},
// { name: '111', b: '2', c: '3' ,spection:'特殊'},
{ name: '2222', b: '1', c: '2' ,spection:'特殊'},
{ name: '2222', b: '1', c: '2' ,spection:'特殊'},
{ name: '2222', b: '1', c: '2' ,spection:'特殊' },
{ name: '333', b: '333', c: '333' ,spection:'特殊' },
{ name: '333', b: '123', c: '321' ,spection:'特殊'},
{ name: '444', b: '123', c: '321' ,spection:'特殊'},
],
// 相对应方法
// 合并单元格的规则
arraySpanMethod({row,column,rowIndex,columnIndex}){
if(columnIndex === 1 || columnIndex === 2 || columnIndex === 3 ||columnIndex === 4
|| columnIndex === 5 || columnIndex === 6 ||columnIndex === 7 || columnIndex === 8 || columnIndex === 9 ||columnIndex === 10 ){
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
console.log(this.spanArr[rowIndex])
console.log('----------')
console.log(_col)
return {
rowspan: _row,
colspan: _col
}
}
},
// 获取到数据后判断哪些数据行是需要合并的
merageRows(){
this.tableList.reduce((pre,cur,i) => {
if(i === 0 ){
this.spanArr.push(1),
this.pos = 0
}else{
if( cur.name === pre.name ){
this.spanArr[this.pos] +=1
this.spanArr.push(0)
}else{
this.spanArr.push(1)
this.pos = i
}
}
return cur
},{})
console.log(this.spanArr)
}
