preface

In the near future, according to the demand, to do a lazy load of the organization tree, and can edit the organization tree. But it can’t be updated in real time after editing. At the beginning, I thought of many solutions and referred to many solutions on the Internet, but all of them were inadequate.

So I went to look at the source code for the lazy loading method of elementUI’s Tree component. As follows:

Node.prototype.loadData = function loadData(callback) {
    var _this5 = this;
    
    var defaultProps = arguments.length > 1 && arguments[1]! = =undefined ? arguments[1] : {};
    
    if (this.store.lazy === true && this.store.load && !this.loaded && (!this.loading || Object.keys(defaultProps).length)) {
      this.loading = true;
      
      var resolve = function resolve(children) {
        _this5.loaded = true;
        _this5.loading = false;
        _this5.childNodes = [];
    
        _this5.doCreateChildren(children, defaultProps);
    
        _this5.updateLeafState();
        if(callback) { callback.call(_this5, children); }};this.store.load(this, resolve);
    } else {
      if (callback) {
        callback.call(this); }}};Copy the code

This is the current node. If this. Loaded is the current node. Resolve set this.loaded to true;

So simply set the parent of the current node’s loaded property to false. This will continue to request lazy loading methods when the node is clicked again.

An 🌰 :

handleSuccess(){// Refresh the current node if the child node is added, refresh the parent node if the current node is updatedletnode = this.isNew? this.currentNode:this.currentNode.parent; node.loaded=false;
    node.isLeaf = false;
    this.$set(node,'expanded'.false);
},
Copy the code

This is how I load tree lazily in vue project.

PS1: I’ve also set the isLeaf and expanded properties to false here to be more personal.

PS2: View updates cannot be triggered by modifying properties alone. Here I use vue.$set() to trigger view updates. For the usage of vue.$set, see official documentation