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