前言

element-ui中的懶載入文件解釋的不算詳細，實際處理時有的需求也是查了半天才實現的

先貼一下我的樹的定義，主要，我這裡繫結的ref是list，繫結的資料是roomList，當然lazy是true

      <el-table
        ref="list"
        :data="roomList"
        row-key="id"
        size="small"
        :lazy="true"
        :load="loadChildrenRoom"
        :row-class-name="getRowClass"
      >
xxxxxx
      </el-table
 

問題1：節點資料更新以後，如何更新子節點資料？

如果只是單純的更新繫結的資料，我這邊嘗試是不能更新節點資料的。

這個在網上能搜到不少，最終我能夠使用的方案，是在重新載入時，清空對應ref下的這兩個資料:

        this.$set(this.$refs["list"].store.states, "lazyTreeNodeMap", {});
        this.$set(this.$refs["list"].store.states, "treeData", {});

我嘗試的結果是無論少清除哪一個，都會有問題

問題2，編輯子節點儲存以後，樹就收縮了，那麼如果在儲存完成後，自動再展開到子節點呢？

注：我這裡處理的情況都是最多一層子節點，所以程式碼只考慮了一層。

這個問題我在網上搜了半天，最接近的就是這篇文章地址，不過很遺憾，我按照這個方式，設定hasChildren和children並不能起效。

搗鼓了半天，最後發現，還是需要從上面的lazyTreeNodeMap和treeData入手。
通過列印，我發現treeData實際包含了各個節點資訊，其中有一個關鍵屬性是expanded，就是表示該節點是否展開（當然如果不是雙向繫結可能也是白搭，不過測試發現通過設定這個值確實可以觸發展開）。
而lazyTreeNodeMap包含了所有待展開葉子節點的資料。

所以最後的解決方案是，在正常載入完第一層節點資料後：

1. 獲取需要展開的節點的子節點
2. 將子節點設定到需要展開的節點的children屬性上，並將hasChildren屬性設定為false(如果不設定false，會有小bug，展開的小箭頭狀態與實際展開狀態不對應)
3. 在treeData中設定該節點的expanded屬性

  //treeData[id]中的id就是需要展開節點的table定義的rowkey屬性值
  this.$set(
    this.$refs["list"].store.states.treeData[id],
    "expanded",
    true
  );

完