基于Element中的el-tree组件的懒加载和更新节点数据
以前的树结构都是通过接口调用，获取所有树结构的数据，直接给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组件的懒加载和更新当前的树结构；
