iview表格合并重复行/列

344 阅读1分钟

暂且只有列的合并,具体代码贴下面

: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
    }
  }
}
```

多多交流,希望指正