1. 程式人生 > 實用技巧 >ElementUI tree非同步樹(懶載入)節點新增刪除編輯時實現區域性重新整理

ElementUI tree非同步樹(懶載入)節點新增刪除編輯時實現區域性重新整理

最近弄一個專案,因為樹形資料量較大,必須要一層層載入資料。所以採取了樹形懶載入方式,但是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_)      
}

測試幾次,沒發現問題,可行

參考:https://www.cnblogs.com/heyefengyin/p/11430073.html