elementui tree如何重新渲染指定節(jié)點(diǎn)及其子節(jié)點(diǎn)(懶加載方式)

問題描述

el-tree組件如何更新指點(diǎn)節(jié)點(diǎn)的數(shù)據(jù)和子節(jié)點(diǎn)數(shù)據(jù)，

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

現(xiàn)象入上圖

1、左側(cè)樹組件，右側(cè)其他組件
2、左側(cè)樹采用異步加載，點(diǎn)擊左側(cè)的node，右側(cè)會ajax請求數(shù)據(jù)并渲染，渲染的是點(diǎn)擊node下面的文件夾及其他
3、右側(cè)的文件夾雙擊是進(jìn)入，對應(yīng)左側(cè)也要展開，右側(cè)文件夾編輯可以修改文件夾名稱，移動文件夾的路徑，還有刪除文件夾和新建文件夾的功能，需要左側(cè)樹結(jié)構(gòu)也對應(yīng)更新

相關(guān)代碼，代碼比較多，最后面有文字總結(jié)

樹結(jié)構(gòu)代碼

<el-tree class="teamtree"  
    :props="defaultProps"
    :load="loadNodephoto"
    lazy
    v-if="phototreeshow"
    @node-expand="expandHandle"
    ref="phototree"
    node-key="folderId"
    :default-expanded-keys="defaultexpendphoto"
    empty-text="數(shù)據(jù)為空"
    :expand-on-click-node="false"
    :highlight-current="true"
    @node-click="handleNodeClick">
</el-tree>

展開方法

loadNodephoto(node, resolve) {
  let res1 = [];
  // 此處緩存了resolve方法，想通過這種方式來更新節(jié)點(diǎn)數(shù)據(jù)
  this.tmpResolvephoto = resolve;
  if ("level" in node) {
    if (node.level === 0) {
      return resolve([
        {
          folderId: 0,
          folderName: "全部圖片",
          parentFolderId: null,
          path: "0:全部圖片",
          leaf: false
        }
      ]);
    }
  }
  // 這個方法是請求ajax把數(shù)據(jù)返回
  this.getTreeData(node.data.folderId).then(res => {
    resolve(res);
  });
},
 // 右側(cè)進(jìn)入左側(cè)對應(yīng)展開
photoExpend(list) {
  let ori = new Set(this.defaultexpendphoto);
  let now = new Set(list);
  let res = new Set([...ori, ...now]);
  res = Array.from(res);  
  this.defaultexpendphoto = [];
  this.defaultexpendphoto = res; 
},
expandHandle(data,node,arg){
  this.photoExpend([data.folderId]) 
},
/** 圖片樹重新獲取節(jié)點(diǎn)數(shù)據(jù)
 * @type:1/2/3 1:當(dāng)前文件夾/父級/爺爺級
 * @id:文件夾id
 * @idtype:1/2:傳入的id是當(dāng)前/父級
 */
getPhotoNodeData(type, id, idtype) {
  console.log(type, id, idtype)
  let grandId, grandnode, parentnode, parentId, nownode;
  // 爺級都需要傳父級id
  if (type == 3 && idtype == 2) {
    parentnode = this.$refs.phototree.getNode(id);
    if (parentnode) {
      grandId = parentnode.data.parentFolderId || 0;
      console.log(grandId)
      grandnode = this.$refs.phototree.getNode(grandId);
      this.loadNodephoto(grandnode, this.tmpResolvephoto);
    }
  } else if (type == 2 && idtype == 2) {
    parentnode = this.$refs.phototree.getNode(id);
    if (parentnode) {
      this.loadNodephoto(parentnode, this.tmpResolvephoto);
    }
  } else if (type == 2 && idtype == 1) {
    // 父級傳入自己的id
    nownode = this.$refs.phototree.getNode(id);
   
    if (nownode) {
      parentId = nownode.data.parentFolderId || 0;
      this.photoExpend([parentId])
      parentnode = this.$refs.phototree.getNode(parentId);
      this.loadNodephoto(parentnode, this.tmpResolvephoto);
    }
  } else {
    console.log(type, idtype);
  }
}

你期待的結(jié)果是什么？實(shí)際看到的錯誤信息又是什么？

目前想到的是通過緩存resolve方法，然后通過:load對應(yīng)的事件方法來重新加載數(shù)據(jù)。這樣發(fā)現(xiàn)了一個問題：

1. 在新建/編輯文件夾我需要更新爺級節(jié)點(diǎn)子節(jié)點(diǎn)的數(shù)據(jù)
2. 其他需要更新父級節(jié)點(diǎn)子節(jié)點(diǎn)數(shù)據(jù)
3. 緩存的resolve方法中有個_this5，測試后發(fā)現(xiàn)他指向的是最后一次展開的節(jié)點(diǎn)，這樣會導(dǎo)致我重新獲取后的數(shù)據(jù)更新到了我最后一次展開的節(jié)點(diǎn)中問不是我需要的節(jié)點(diǎn)

我現(xiàn)在改成了通過V-if每次修改完成之后都重新渲染tree，這樣實(shí)際上是有問題的，還請各位大佬給個正確的辦法 或者demo ，其實(shí)實(shí)現(xiàn)的功能類似于windows的文件管理器
聯(lián)系我：498755303@qq.comu