以前的樹結構都是通過介面呼叫，獲取所有樹結構的資料，直接給el-tree元件賦值，然後進行一系列的操作。這次遇到了一個新的需求就是，因為樹結構的資料量會很大，導致不能一次性給到全部的資料，只能按照展開的層級，一級一級的展開並且載入資料；這個時候就需要用到了el-tree元件的懶載入功能；先把element樹結構的文件放在這裡，方便查閱。然後說下最主要的兩個Attributes。一個是lazy一個是load；

然後看下具體的程式碼：

 1         <el-tree
 2           class="filter-tree"
 3           :load="loadNode"
 4
 
           lazy
 5           :props="defaultProps"
 6           :filter-node-method="filterNode"
 7           :render-content="renderContent"
 8           ref="treeRef"
 9           :expand-on-click-node="false"
10           @node-contextmenu="rightClick"
11           @node-click="leftClick"
12           node-key="id"
13
 
         ></el-tree>

其他配置項先不用管，只看lazy和load，其中lazy直接設定成true就行了。也就沒有其他的後續的操作了。load需要一個函式，這裡需要詳細的說下，介面文件中就簡單的說了下有個node和resolve引數，就沒有其他的介紹了。

1     // 懶載入獲取樹形結構
2     loadNode(node, resolve) {
3       console.log(node, resolve);
4       if (node.level == 0) { // node其實是需要展開樹節點，但是第一次的node是個無用的資料，可以認為這個node是element給我們建立的，判斷的話，就是level等於0
 

5         this.getTreeData(0, resolve);
6       } else {
7         this.getTreeData(node, resolve);
8       }
9     },

然後getTreeData就是獲取新資料函式：

 1     // 獲取樹形結構的資料
 2     getTreeData(node, resolve) {
 3       var searchNodeID = node ? node.data.id : null;
 4       this.$http({
 5         url: "./sweb/api/apiCmd",
 6         method: "post",
 7         contentType: "application/json",
 8         data: {
 9           path: "findSystemsTree",
10           body: { id: searchNodeID }
11         },
12         dataType: "json"
13       }).then(res => {
14         let data = res.data;
15         if (!node) {
16           return resolve([data.data]); // resolve是一個函式，它會接受一個數組，作為你要展開的節點的孩子節點，如果沒有孩子節點，直接傳一個空陣列
17         } else {
18           if("data" in data.data){
19             return resolve(data.data.data);
20           }else{
21             return resolve([])
22           }
23         }
24       });
25     },

　　這裡還有一個需要注意的一點就是，當我們展開了一個樹，然後關閉之後，再次展開是不會再次觸發load函式的。意思說element幫我們判斷了是不是需要已經展開了。但是就造成了一個問題，我們沒有辦法更新資料。比方說我們更改了一個樹的name或者刪除了一個節點。這個時候我們要更新資料的話，只能使用其他的辦法，如下：

 1     refreshTreeNode(isParent) {
 2       // 如果傳入isParent 為真則重新整理父元素，主要是用來重新命名，或者複製的時候使用的；重新整理當前的節點，一般的情況是新增操作
 3       let node = isParent
 4         ? this.$refs.treeRef.getNode(‘父節點的唯一ID’)
 5         : this.$refs.treeRef.getNode(‘當前節點的唯一D’);
 6       if (node) {
 7         node.loaded = false;
 8         node.expand(); // 主動呼叫展開節點方法，重新查詢該節點下的所有子節點
 9       }
10     },

　　通過以上的設定就完成了，el-tree元件的懶載入和更新當前的樹結構；