vxe-table解决启用虚拟滚动时合并单元格错位的问题

vxe-table在启用虚拟滚动时，合并单元格会出现错位问题，这里可以用临时单元格合并，只需要在列表加载时调用（注意：分页加载每次都需要重新调用）

<vxe-table :data='data' :merge-cells="mergeCells" >

const data = ref([])

//合并单元格
  const mergeCells = ref([])
  const mergecellMethod = (arr, filed) => {
    //arr:合并数据，filed：合并关键字段
    let temObj = {}
    // 处理相同合并的数据分组
    for (let i = 0; i < arr.length; i++) {
      let item = arr[i].product

      if (!temObj[item[filed]]) {
        temObj[item[filed]] = [item]
      } else {
        temObj[item[filed]].push(item)
      }
    }
    let resArr = []
    Object.keys(temObj).forEach((key) => {
      resArr.push({
        key: key,
        data: temObj[key]
      })
    })
  
  // 根据处理好的分组数据，计算合并规则
    let row = 0
    let mergeCellsArr = []
    resArr.forEach((item, index) => {
    //这里push两个对象，如果你合并几列，写几个对象，可以看下面的截图，你就明白了
      mergeCellsArr.push({ row: row, col: 0, rowspan: item.data.length }, { row: row, col: 1, rowspan: item.data.length })
      row = mergeCellsArr[mergeCellsArr.length - 1].row + mergeCellsArr[mergeCellsArr.length - 1].rowspan
    })
    mergeCells.value = mergeCellsArr
  }



//数据初始化时传入要合并单元格的数据
 onMounted(async() => {
    //列表数据
   const res = GloabApi.doAdvFilter({
        tableCode: data.value.tableCode,
        pageNo: tablePage.currentPage,
        pageSize: tablePage.pageSize
      })
    //传入合并数据，相同的唯一值,通过判断这个id相同，来合并到一起
      mergecellMethod(res.data,'id')
  })

 这里合并规则

[

{row: 0, col: 0, rowspan: 5}

{row: 0, col: 1, rowspan: 5}

]

这里两个row：0，一个代表行号，一个代表物料信息

row：行索引

col：列索引

rowspan: 合并的行数 （5代表合并5行）

colspan：合并的列数（3代表合并3列）