ElementUI tree非同步樹(懶載入)節點新增刪除編輯時實現區域性重新整理
阿新 • • 發佈:2020-11-13
最近弄一個專案,因為樹形資料量較大,必須要一層層載入資料。所以採取了樹形懶載入方式,但是element官方文件並未找到可直接提供重新整理某個樹節點的方法,那我直接對某一個子節點進行資料操作總不能整個tree重新整理資料吧,這樣子體驗和操作資料極不方便。
<el-tree :highlight-current="true" node-key="StandardID" ref="tree" :load="loadNode" lazy :props="defaultProps" @node-click="handleNodeClick"> <span slot-scope="{ node }"> {{ node.label }} </span> </el-tree>
區域性重新整理:
async loadNode(node, resolve) { //載入資料的方法裡把node,reslove存起來 this.node = node; this.resolve = resolve; this.node.childNodes = []; //獲取資料 if (node.level === 0) { const listTable= await this.getList(0) // 獲取主表資料 return resolve(listTable) } else { const listData = await this.getList(node.level, node.data.StandardID) return resolve(listData) }
}
手動重新整理方法呼叫
this.loadNode(this.node, this.resolve)
以上方法對某節點新增時資料時區域性資料重新整理是沒問題的,但是對節點某條資料編輯刪除時仍是沒效果(可能是本人get不到點)。以下是最終採取的解決方案,找到對應的樹節點,使用expand
//對子節點進行更新 refreshNodeBy(id) { let node = this.$refs.tree.getNode(id); // 通過節點id找到對應樹節點物件 node.loaded = false; node.expand(); // 主動呼叫展開節點方法,重新查詢該節點下的所有子節點 },
手動區域性重新整理,呼叫refreshNodeBy(預設是重新整理當前節點下的資料,所以新增時取當前節點id,編輯時取當前節點的父級id,當編輯頂級節點時注意其父級id是沒有的,加個判斷即可)
//樹形新增編輯刪除操作重新整理 Refresh_standar(data) { let id_=data==='add'?this.currentData.StandardID:this.EditStandard.SupID this.refreshNodeBy(id_) }
測試幾次,沒發現問題,可行