以前的樹結構都是通過接口調用，獲取所有樹結構的數據，直接給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組件的懶加載和更新當前的樹結構；