關於Element UI tree組件 懶加載的更新操做

近期根據需求,要作一個懶加載的組織樹,而且能夠編輯組織樹。可是編輯成功以後,卻沒法進行實時更新。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

相關文章
相關標籤/搜索