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

clipboard.png

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:

  1. I need to update the data of the master node child node in the new / edit folder
  2. other needs to update parent node child node data
  3. 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

Mar.28,2021

there are append methods on this.$refs.phototree.store

see https://github.com/ElemeFE/el.


I also encountered the problem of lazy loading tree update nodes. I don't know if it is applicable to your case
https://codeshelper.com/a/11.


invite


Big Brother how did you finally solve it? give me an answer


1. What I do is to get the node,
2 of the current operation first. Get parent = > childNodes
3 through node. Then iterate through childNodes to get a new array nodes, and update the node through updateKeyChildren

Why do you want to get a new array nodes? here? Because the updateKeyChildren method in the element framework directly deletes childNodes, and then assigns a new data, if we change childNodes, directly, childNodes becomes a [] array when assigning values, so we can first call remove, to delete all nodes, and then append back. (funny)

// 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);
    }
  }

copy node

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)

how do you solve this problem? the function I'm going to implement now is almost exactly the same as yours. Please let me know

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-7b4595-2984d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-7b4595-2984d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?