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 = truelet { data: res } = await getData(params)this.tableLoading = falseif (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 = idif (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)}}}},