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

近期根據需求，要做一個懶加載的組織樹，並且可以編輯組織樹。但是編輯了之后無法進行實時更新。

一開始想到了很多解決方案，也在網上參考了很多方案，但是都又種種不足。

所以我去看了elementUI的tree組件的懶加載方法的源代碼

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

this明顯是當前節點， 看if語句的條件中 this.loaded是當前節點是否已加載 。 resolve中把this.loaded置為了true；

所以只用將當前節點的父節點的loaded屬性置為false就行了。 這樣再次點擊該節點時，會繼續請求懶加載方法。

PS1 : 這里為了更人性化，我將isLeaf和expanded屬性也置為了false。

PS2 : 光修改屬性是無法觸發視圖更新的，這里我通過了vue.$set()方法來觸發視圖更新。  vue.$set的用法見官方文檔：https://cn.vuejs.org/v2/api/#Vue-set

orgSuccess(){
      //如果是新增子節點，則刷新當前節點 ，如果是更新當前節點，刷新父節點
      let node = this.isNew?this.currentNode:this.currentNode.parent;
      node.loaded=false;
      node.isLeaf = false;
      this.$set(node,'expanded',false);
    },