為了保持住持之以恆的勳章，不得不在9月的最後幾天內水幾篇原創文章。本人是剛接觸element ui，屬於大白菜一顆，大神有其他方法的話，歡迎評論留言指導。

<el-tree
  :props="props1"
  :load="loadNode1"
  lazy
  show-checkbox>
</el-tree>

<script>
  export default {
    data() {
      return {
        props1: {
          label: 'name',
          children: 'zones',
          isLeaf: 'leaf'
        },
      };
    },
    methods: {
      loadNode1(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: 'region' }]);
        }
        if (node.level > 1) return resolve([]);

        setTimeout(() => {
          const data = [{
            name: 'leaf',
            leaf: true
          }, {
            name: 'zone'
          }];

          resolve(data);
        }, 500);
      }
    }
  };
</script>
 

上面程式碼是element ui官方樹懶載入的例項。實現就是新增lazy，繫結一個load屬性，點選節點的時候，就會觸發loadNode1的方法，將資料刷到點選的節點裡面。

這裡的問題是：如果該節點load過資料，再次點選是不會觸發loadNode1這個方法的，但是這個節點下的子節點也許會動態增加或者刪除

解決的思路是：

1、得到選中的節點

2、將選中節點的子節點全部刪除

3、將選中節點的子節點資料手動刷到該節點內

我查過element ui原始碼，這裡用到原始碼內的方法，所以我們實現下來很方便，只要三行程式碼

function refreshLazyTree(node, children) {
  var theChildren = node.childNodes
  theChildren.splice(0, theChildren.length)
  node.doCreateChildren(children)
}
 

1、node就是選中的的節點（也就是點選展開的節點），你可以通過element ui裡的getNode方法獲得，也可以直接監聽@node-click事件直接獲取選中的節點。

2、children就是node這個節點的子項

3、通過splice方法刪除node節點下的所有子項

4、呼叫doCreateChildren建立子項就ok了