vxe-table表格合并行和虚拟滚动冲突

项目一直用的vxe-table 2.0版本，支持表格的虚拟滚动，最近要做表格合并行功能，虚拟滚动便失效了，强行虚拟滚动，合并行会有错行现象。
vxe-table2.0给出的解释是：合并行不能和虚拟滚动一起使用。

目前找到两种解决方式：

1.升级表格到3.0版本

vxe-table3.0支持合并行虚拟滚动，但是它支持的是临时合并状态的表格，我们用的一般都是span-methods自定义合并函数。
比如，这种写法是一行一行比较，遇到adjustDicName和commonId相同的就把'index', 'adjustDicName', 'wantNum', 'totalPlanNum', 'zbPrice', 'forwardNum', 'prevForwardMoney', 'unscheduledNum'，这些字段都合并了。

但这种在vxe-table3.0也是不支持虚拟滚动的。

  // 合并规则
        rowspanMethod({
            row,
            _rowIndex,
            column,
            visibleData
        }) {
            let fields = ['index', 'adjustDicName', 'wantNum', 'totalPlanNum', 'zbPrice', 'forwardNum', 'prevForwardMoney', 'unscheduledNum']
            let cellValue = row[column.property]
            let xtmcCell = row['adjustDicName']
            let xtmcCell2 = row['commonId']
            if (fields.includes(column.property)) {
                let prevRow = visibleData[_rowIndex - 1]
                let nextRow = visibleData[_rowIndex + 1]
                if (prevRow && prevRow[column.property] == cellValue && prevRow['adjustDicName'] == xtmcCell && prevRow['commonId'] == xtmcCell2) {
                    return {
                        rowspan: 0,
                        colspan: 0
                    }
                } else {
                    let countRowspan = 1
                    while (nextRow && nextRow[column.property] == cellValue && nextRow['adjustDicName'] == xtmcCell && nextRow['commonId'] == xtmcCell2) {
                        nextRow = visibleData[++countRowspan + _rowIndex]
                    }
                    if (countRowspan > 1) {
                        return {
                            rowspan: countRowspan,
                            colspan: 1
                        }
                    }
                }
            }
        },

看官网例子vxe-table v3
可以通过 merge-cells 做临时合并，我们只要把表格的需要合并状态全部计算提取出来，便可以实现合并行的虚拟滚动。

怎么提取呢？
把需要合并的第一行给你一个标志，比如 以下三行合并num:3,  以下一行合并num:1, 剩下的为num:0

处理数据：

  handleListRowSpan() {
            let prevItem
            this.tableData.forEach(item => {
                item.num = 0
                if (prevItem && prevItem.adjustDicName == item.adjustDicName && prevItem.commonId == item.commonId) {
                    prevItem.num++
                } else {
                    item.num = 1 // 初始化合并行数
                    prevItem = item
                }
                
            })
          console.log('this.tableData',this.tableData)
          let arr=[]
          this.tableData.forEach((ele,index)=>{
                 if(ele.num>1){
                    arr.push({row:index,col:0,rowspan:ele.num,colspan:1})
                    arr.push({row:index,col:1,rowspan:ele.num,colspan:1})
                    arr.push({row:index,col:2,rowspan:ele.num,colspan:1})
                    arr.push({row:index,col:3,rowspan:ele.num,colspan:1})
                    arr.push({row:index,col:4,rowspan:ele.num,colspan:1})
                    arr.push({row:index,col:5,rowspan:ele.num,colspan:1})
                    arr.push({row:index,col:6,rowspan:ele.num,colspan:1})
                    arr.push({row:index,col:7,rowspan:ele.num,colspan:1})
                }
          })
        console.log('this.mergeCells,',arr)
        this.mergeCells=arr
        },

第一个循环是把处理成带num：合并行数 或者 num：0 标识的数据
第二个循环是把数据处理成mergeCells需要的数据格式，row：第几行，col:第几列,rowSpan:合并几行，colSpan：合并几列。

灵感来源于这个博友的文章：element-ui表格，el-table多级合并行_element puls 中的tabel表格实现多层级合并-CSDN博客

2.使用el-table-virtual-scroll表格

官网api：el-table-virtual-scroll

这个表格也是支持虚拟滚动和合并行一起使用的。具体可以自己看官网，但是他的表格功能没有vxe-table丰富，如果使用，之前的逻辑的逻辑要改的太多，便没有采用。

总结：

方法一：升级表格，

        对当前需要虚拟加载的合并行表格页面修改的代码不多，但是升级表格会有系统有不可预知的影响，比如一些废弃的api需要更换，我们之前用的vxe-table-plugin-virtual-tree需要依赖于vxe-table2.0，升级后组件虚拟滚动功能会失效（如何解决下一篇写）等等。在项目前期使用较好。
        还有一个限制，合并行如果是十几个或者几十个一合并，这种方法还可以，但是几百个，几千个一合并，组件默认一次至少加载一个合并行的数据，还是会卡.

 
方法二：换表格，

在项目后期使用较好，对系统其他模块没有影响，但是很多功能没有vxe-table齐全。