iview table表格单元格的动态合并
1. 需求
需要将从后台获取的数据，在前端渲染时，如果同一列相邻的数据相同，则合并成一个单元格。
即：
需要将上图两个单元格合并，成果图如下
2. 问题
本项目使用的是iview组件，iview组件也提供了单元格合并的接口handleSpan,单有关需求的算法需要自己实现。
2.1 先介绍一下iview官方例子
看一下handleSpan 的用法
methods: {
handleSpan ({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0 && columnIndex === 0) {
return [1, 2];
} else if (rowIndex === 0 && columnIndex === 1) {
return [0, 0];
}
if (rowIndex === 2 && columnIndex === 0) {
return {
rowspan: 2,
colspan: 1
};
} else if (rowIndex === 3 && columnIndex === 0) {
return {
rowspan: 0,
colspan: 0
};
}
}
}
先看代码段：
if (rowIndex === 0 && columnIndex === 0) {
return [1, 2];
} else if (rowIndex === 0 && columnIndex === 1) {
return [0, 0];
}
rowIndex === 0 && columnIndex === 0 是指第一行第一列（index从零开始），即左上角第一个单元格，return [1, 2]; return [1,2] 是表示，合并一行两列，即从左上角第一个单元格出发，找一行两列进行合并。
rowIndex === 0 && columnIndex === 1 是第一行第二列单元格，return [0, 0]; 是被合并单元格的标志，所有被合并的单元格都需要返回 [0,0]。
注意：合并和被合并的区别，返回值不是[0,0]的，其内容显示在合并后的单元格中。返回值是[0,0]的是被合并的单元格，内容相当于删除
上述便是handleSpan 的基本用法
2.2 动态合并问题
i-table组件虽然留有合并的接口handleSpan ，但单元格合并的逻辑和算法都需要自己解决。
网上也有很多大佬分享的算法，但博主亲身测试一下，不太满足需求。
因为项目需求是：
对于个别列，需要将相邻相同的数据单元格进行合并。
网上的算法，很多都是没有相邻这个条件，并且过于复杂！
3. 解决办法
先上代码：
handleSpan ({ row, column, rowIndex, columnIndex })
{
//合并第2列
if (columnIndex == 1) {
//计算合并的行数列数
let x = row.num == 0 ? 0:row.num
let y = row.num == 0 ? 0:1
console.log(x,y)
return [x, y]
}
},
assembleData(data){
for(var i=0; i<data.length;i++){
if(data[i].already!==1){
if(data[i+1]){
data[i].num=1
for(var a =i+1 ;a<data.length;a++){
if(data[i].name === data[a].name) {
data[i].num++
data[a].num = 0
data[a].already = 1
}else{
break
}
}
}
}
}
//将整理后的数据交给表格渲染
this.data5 = data
console.log("data")
console.log(this.data5)
},
效果
4. 现存问题：
如果用这个算法去实现，多列合并的话，就可能出现这种情况
需求希望左侧为主，图中的地方不应该出现合并，关于此问题，以后再追加！
5. 问题解决
直接上代码：
handleSpan ({ row, column, rowIndex, columnIndex })
{
//合并第二列,这里columnIndex==1 根据具体业务要在前端写死
if (columnIndex == 1) {
console.log()
//计算合并的行数列数
let x = row.num == 0 ? 0:row.num
let y = row.num == 0 ? 0:1
console.log(x,y)
return [x, y]
}
if (columnIndex == 2) {
//计算合并的行数列数
let x = row.agenum == 0 ? 0:row.agenum
let y = row.agenum == 0 ? 0:1
console.log(x,y)
return [x, y]
}
},
assembleData(data){
// 数据处理算法，处理后，便于单元格的合并
for(var i=0; i<data.length;i++){
if(data[i].already!==1){
if(data[i+1]){
data[i].num=1
for(var a =i+1 ;a<data.length-i;a++){
if(data[i].name === data[a].name) {
data[i].num++
data[a].num = 0
data[a].already = 1
}else{
break
}
}
}
}
}
for(var j=0; j<data.length;j++){
// > 1 表示name 有合并 需要在name合并的row中 再合并age
if(data[j].num>1){
for(var k = 0; k < data[j].num ; k++) {
if(data[j+k].agealready !== 1) {
if(k+1 < data[j].num){
data[j+k].agenum = 1
for(var b =k+1;b<data[j].num;b++){
if(data[j+k].age === data[j+b].age) {
data[j+k].agenum ++
data[j+b].agenum = 0
data[j+b].agealready = 1
}else{
break
}
}
console.log(888888)
console.log(data[j+k].agenum)
}
}
}
}
}
//将整理后的数据交给表格渲染
this.data5 = data
console.log(this.data5)
},
