近期根據需求,要作一個懶加載的組織樹,而且能夠編輯組織樹。可是編輯成功以後,卻沒法進行實時更新。vue
一開始想到了不少解決方案,也在網上參考了不少方案,可是都有種種不足。遂查閱了ElementUi的tree組件源代碼。node
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); } } };
ps:以上代碼來自node_modules/element-ui/lib/tree.jselement-ui
this明顯是當前節點, 看if語句的條件中 this.loaded是當前節點是否已加載 。 resolve中把this.loaded置爲了true;api
因此只用將當前節點的父節點的loaded屬性置爲false就好了。 這樣再次點擊該節點時,會繼續請求懶加載方法。fetch
//節點更新成功後的操做 orgSuccess(){ //若是是新增子節點,則刷新當前節點 ,若是是更新當前節點,刷新父節點 let node = this.isNew?this.rightNode:this.rightNode.parent; node.loaded=false; node.isLeaf = false; this.$set(node,'expanded',false); this.fetchData(); },
PS1 : 這裏爲了交互更人性化,我將isLeaf和expanded屬性也置爲了false。
PS2 : 光修改屬性是沒法觸發視圖更新的,這裏我經過了vue.set()方法來觸發視圖更新。 vue.set()的用法見官方文檔:https://cn.vuejs.org/v2/api/#...ui
初來乍到,有什麼不足或者不對的地方請你們指正!this