暂且只有列的合并,具体代码贴下面
:span-method="handleSpan"是iview暴露的合并方法,具体看官网
<Table :columns="columns13" :data="data5" border :span-method="handleSpan" >
处理数据的方法,就是在当前行添加对象,对象里面是当前单元格返回的数组,就是存放handleSpan方法的返回值,思路是判断当前行数据和上一行数据是否相同,相同就在第一个上+1,不同,更新下标,重新计数,直到循环结束。
其实可以新建数组用来保存合并数据,这样处理更好
getDataTable(){
let indexMerge1 = 0
let indexMerge2 = 0
let indexMerge3 = 0
let indexMerge4 = 0
this.data5.forEach((item,index,list)=>{
if(index==0){
item.rowMerge = {
Merge1:[1,1],
Merge2:[1,1],
Merge3:[1,1],
Merge4:[1,1],
}
}else{
item.rowMerge = {
Merge1:[0,0],
Merge2:[0,0],
Merge3:[0,0],
Merge4:[0,0],
}
//第一列
if(item.key1 == list[index-1].key1){
item.rowMerge.Merge1 = [0,0]
this.data5[indexMerge1].rowMerge.Merge1 = [this.data5[indexMerge1].rowMerge.Merge1[0]+1,1]
}else{
indexMerge1 = index
item.rowMerge.Merge1 = [1,1]
}
//第二列
if(item.key2 == list[index-1].key2){
item.rowMerge.Merge2 = [0,0]
this.data5[indexMerge2].rowMerge.Merge2 = [this.data5[indexMerge2].rowMerge.Merge2[0]+1,1]
}else{
indexMerge2 = index
item.rowMerge.Merge2 = [1,1]
}
//第三列
if(item.key3 == list[index-1].key3){
item.rowMerge.Merge3 = [0,0]
this.data5[indexMerge3].rowMerge.Merge3 = [this.data5[indexMerge3].rowMerge.Merge3[0]+1,1]
}else{
indexMerge3 = index
item.rowMerge.Merge3 = [1,1]
}
//第四列
if(item.key4 == list[index-1].key4){
item.rowMerge.Merge4 = [0,0]
this.data5[indexMerge4].rowMerge.Merge4 = [this.data5[indexMerge4].rowMerge.Merge4[0]+1,1]
}else{
indexMerge4 = index
item.rowMerge.Merge4 = [1,1]
}
}
})
// console.log(this.data5)
},
```
```
这是合并方法,直接返回处理数据中的数组
```
handleSpan ({ row, column, rowIndex, columnIndex }) {
// console.log(row)
if(this.data5[rowIndex].rowMerge){
if(columnIndex === 0){
console.log(rowIndex)
console.log(this.data5[rowIndex].key1)
console.log(this.data5[rowIndex].rowMerge.Merge1)
return this.data5[rowIndex].rowMerge.Merge1
}
if(columnIndex === 1){
return this.data5[rowIndex].rowMerge.Merge2
}
if(columnIndex === 2){
return this.data5[rowIndex].rowMerge.Merge3
}
if(columnIndex === 3){
return this.data5[rowIndex].rowMerge.Merge4
}
}
}
```
多多交流,希望指正