elementui 表格树懒加载默认展开某一项的坑

前提：前端拿到树结构的全量数据，前端自己做懒加载。
需求：编辑时需要默认展开到原来选中的那一项。

6000多条数据不做懒加载之前卡到页面点都点不动，前端做了懒加载之后很流畅，这里主要记录下要默认展开某一项时的坑，
懒加载过程不做描述，代码如下，很好理解：

 <el-table
            ref="multipleTable"
            :data="branchList"
            :row-key="getRowKey"
            :expand-row-keys="getExpendKeys()"
            border
            lazy
            :load="loadChild"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            >
<!--列表内容-->
</el-table>

获取全量数据：

this.branchListCopy = allData //这里allData表示从后端接口获取到的树结构全量数据
//处理第一层级数据children为null
this.branchList = JSON.parse(JSON.stringify(this.branchListCopy)).map(item => {
          // hasChildren 表示需要展示一个箭头图标
          item.hasChildren = item.children && item.children.length > 0
          item.idList = [item.id]
          item.children = null
          return item
        })

点击加载子节点：

loadChild(tree, treeNode, resolve){
      // 层级关系备份
      const idCopy = JSON.parse(JSON.stringify(tree.idList))

      // 查找下一层数据
      let resolveArr = this.branchListCopy
      let id

      //找到最后一层children
      while (id= tree.idList.shift()) {
        const tarItem = resolveArr.find(item => item.id=== id)
        tarItem.loadedChildren = true
        resolveArr = tarItem.children
      }

      // 处理下一层数据的属性
      resolveArr = JSON.parse(JSON.stringify(resolveArr))
      resolveArr.forEach(item => {
        item.hasChildren = item.children && item.children.length > 0
        item.children = null
        // 此处深拷贝，以防各个item的idList混乱
        item.idList = JSON.parse(JSON.stringify(idCopy))
        item.idList.push(item.id)
      })

      // 标识已经加载子节点
      tree.loadedChildren = true
      // 渲染子节点
      resolve(resolveArr)
    },

注意上面会设置一个hasChildren的属性，表示如果该节点下有子节点，添加可展开的小箭头。

当拿到需要默认展开的层级id数组时，修改一下初始化branchList的地方：

      let selectIdList = 层级id数组
      const mapChid = (list, idList) => {
        list?.map((item) => {
          item.hasChildren = item.children && item.children.length > 0
          let idCopy = JSON.parse(JSON.stringify(idList)) || []
          idCopy.push(item.orgId)
          this.$set(item, 'idList', idCopy)
          //判断节点id是否存在于需要默认展开的层级id数组内，不存在表示不用展开，children设置为null
          if (!(selectIdList?.length && selectIdList.includes(String(item.id)))){
            item.children = null
          }
          else if(item?.children?.length > 0){
            //如果存在于层级id数组内，继续遍历处理下一级children
            item.children = mapChid(item.children, item.idList);
            //！！！！！！！！！！！！！！！！！！！
            item.hasChildren = false //！！！！！！请注意此处的hasChildren
          }
          return item
        })
        return list
      }
      this.branchList = JSON.parse(JSON.stringify(this.branchListCopy)).map(item => {
          // hasChildren 表示需要展示一个箭头图标
          item.hasChildren = item.children && item.children.length > 0
          item.idList = [item.orgId]
          // item.children = null
          item.children = mapChid(item.children, item.idList)
          if(selectIdList?.length && selectIdList.includes(String(item.id))){
             //！！！！！！！！！！！！！！！！！！！！
            item.hasChildren = false //默认要展开的节点hasChildren不能设置为true
          }
          return item
        })

注意上面打了两排感叹号的地方，如果要默认展开的节点，hasChildren不能设置为true！
就是被这里坑了好久！！！！
也不知道是怎么被我试出来的，本来不想贴代码，为了引出最后这一点想想还是贴了比较好理解，所以有点乱，如果懒加载那一块有问题，欢迎评论一起讨论。