el-table折叠懒加载支持排序

el-table折叠懒加载支持排序

因为el-table懒加载的子节点是通过缓存实现的，如果想在展开的情况下直接刷新对应子节点数据，要操作el-table组件自身数据，否则不会更新

以排序功能为例

	 maps: new Map() //用于存储子节点懒加载的数据

	// 加载子节点的load方法
	async load(tree, treeNode, resolve) {
      // 保存点击节点的信息
      this.maps.set(tree.precinctId, { tree, treeNode, resolve })
      let params = {
        orderBy: this.orderBy
      }
      let treeData = []
      this.tableLoading = true
      let { data: res } = await getData(params)
      this.tableLoading = false
      if (res.code === 200) {
        treeData = res.data
      } else {
        treeData = []
      }
      setTimeout(() => {
        resolve(treeData)
      }, 300)
    },

  // 点击排序后，先获取父节点数据，然后遍历数据，判断是否存在懒加载节点
  sortChange(){
    await this.getTableData(false)  
    this.tableData.forEach(item => {
      this.refreshLoadTree(this.$refs.tableRef.store.states, this.maps, item.precinctId)
    })
  },

    // 更新懒加载节点
    refreshLoadTree(state, maps, id) {
      let treeId = id
      if (maps.get(id)) {
        // 获取节点状态
        const treeStatus = state.treeData[treeId]
        const { tree, treeNode, resolve } = maps.get(id)
        this.$set(state.lazyTreeNodeMap, treeId, []) // 先清空
        if (tree) {
          const { expanded, loaded } = treeStatus
          // 如果未展开但已经缓存
          if (!expanded) {
            if (loaded) {
              // 修改为未加载状态
              this.$set(this.$refs.tableRef.store.states.treeData[treeId], 'loaded', false)
            }
          } else {
            // 重新执行父节点加载子级操作
            this.load(tree, treeNode, resolve)
          }
        }
      }
    },