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