How elementui tree re-renders a specified node and its child nodes (lazy loading mode)

problem description

how the el-tree component updates the data of the pointing node and the child node,

the environmental background of the problems and what methods you have tried

The

phenomenon is shown in the picture above

1, the left tree component, the other components on the right
2, the left tree is loaded asynchronously, click node, on the left, the right side will ajax request data and render, the rendering is to click the folder under node and other
3, double click the folder on the right to enter, corresponding to the folder on the left to expand, and the folder editing on the right can change the folder name, move the path of the folder, and delete the folder and create a new folder. The left tree structure needs to be updated accordingly

related code, there are many codes, and finally there is a text summary

Tree structure code

<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=""
    :expand-on-click-node="false"
    :highlight-current="true"
    @node-click="handleNodeClick">
</el-tree>

expansion method

loadNodephoto(node, resolve) {
  let res1 = [];
  // resolve
  this.tmpResolvephoto = resolve;
  if ("level" in node) {
    if (node.level === 0) {
      return resolve([
        {
          folderId: 0,
          folderName: "",
          parentFolderId: null,
          path: "0:",
          leaf: false
        }
      ]);
    }
  }
  // ajax
  this.getTreeData(node.data.folderId).then(res => {
    resolve(res);
  });
},
 // 
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]) 
},
/** 
 * @type:1/2/3 1://
 * @id:id
 * @idtype:1/2:id/
 */
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);
  }
}

what result do you expect? What is the error message actually seen?

the current idea is to cache the resolve method, and then reload the data through the event method corresponding to: load. In this way, a problem is found:

I need to update the data of the master node child node in the new / edit folder
other needs to update parent node child node data
there is a _ this5, test in the cached resolve method and found that it is pointing to the node that was last expanded, which will cause me to update the data to the node I last expanded and ask if it is not the node I need

now I have changed it to re-render tree, after every modification through V-if, which is actually problematic. I also ask you to give me a correct method or demo. In fact, the function is similar to windows"s file manager
contact me: 498755303@qq.comu

// element updateChildren(key, data) { const node = this.nodesMap[key]; if (!node) return; const childNodes = node.childNodes; for (let i = childNodes.length - 1; i >= 0; i--) { const child = childNodes[i]; this.remove(child.data); } for (let i = 0, j = data.length; i < j; iPP) { const child = data[i]; this.append(child, node.data); } }

let id = 3 // nodeid (key-node) let nodes = [] for (let i = 0; i < childNodes.length; iPP) { // 2 if (copyNodes[i].data.id === id) { nodes[i + 1] = childNodes[i].data nodes[i] = childNodes[i + 1].data } else if (!nodes[i]) { nodes.push(childNodes[i].data) } } // this.$refs.tree.updateKeyChildren(parent.data.id, nodes)