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)}}}},