vue3+TS+elementplus动态合并单元格及遇到的问题解决

动态合并单元格

思路

• ①先获取到相关的数据，但是在获取对象里的属性时为undefined，所以哦通过加一个定时器解决，然后遍历分析所有的数据。

• 但是加了定时器之后，写在定时器里的内容（变量，函数等）在外层作用域又无法获取到进行使用，因此这里就通过在定时器里将需要的数据通过localStorage先本地缓存起来，然后再在外层作用中通过获取本地缓中存储好的数据，这样就能拿到数据了。

• ②设置一个空数组spanArr，后面记录下每一行的rowspan（合并行数）和colspan（合并列数）

• ③先将初始的rowspan和colspan默认值都设置为1

const obj = {
          rowspan: 1,
          colspan: 1
        }

• ④先将第一个需要进行合并的数据的rowspan和colspan设置为1，然后push到数组spanArr中。
• ⑤若前后两项的分类相同,那么后面那一项的rowspan和colspan都设置为0，然后找到相同项中第一项（通过数组的findIndex方法进行查找）
  rowspan列的值加1
• ⑥若前后两个值不相同，则是 一个新的分类合并的开始 ，再将新的分类的第一项重新设置成默认值

js代码

  // 获取所有数据
 const allList = computed(
      () => store.state.ListModule.allListInfo
    )
    //因为allList是action异步获取的，在打印allList里的属性时为undefined
    因此通过setTimeout来延时获取，这样就能获取到allList.value的值了
 setTimeout(() => {
      LocalCache.setCache('allList', allList.value)
    }, 1000)

    var allListValue = LocalCache.getCache('allList')

    // 遍历所有数据 记录每一行的rowspan和colspan
    const getSpanData = () => {
      var spanArr: any[] = []

      for (var i = 0; i < allListValue.length; i++) {
        // 设置初始的默认值
        const obj = {
          rowspan: 1,
          colspan: 1
        }
        if (i === 0) {
          // 第一项直接设置成默认的值
          obj.rowspan = 1
          obj.colspan = 1
          spanArr.push(obj)
        } else {
          if (allListValue[i].categoryId ===
            allListValue[i - 1].categoryId
          ) {
      // 前后两项的分类相同,那么后面那一项的rowspan和colspan都设置为0
            obj.rowspan = 0
            obj.colspan = 0
            spanArr.push(obj)
        // 然后找到相同项中第一项 rowspan列的值加1
            var index = allListValue.findIndex((item)
             => item.categoryId === allListValue[i].categoryId
            )
            spanArr[index].rowspan++
          } else {
       // 前后两个值不相同 一个新的分类开始 重新设置成默认值
            obj.rowspan = 1
            obj.colspan = 1
            spanArr.push(obj)
          }
        }
      }
      return spanArr
    }
    var spanArr = getSpanData()
    const objectSpanMethod = ({ row, column, rowIndex, columnIndex })   
    => {
      // 对第一列每一个数据进行合并操作
      if (columnIndex === 0) {
        if (spanArr) {
          let rowspan = spanArr[rowIndex].rowspan
          let colspan = spanArr[rowIndex].colspan
          return { rowspan, colspan }
        }
      }
    }