如何实现Element树形控件Tree在懒加载模式下的动态升级

Element提供的Tree树形控件，可以用清晰的层级结构展现信息，还可以开展或者折叠。Tree支持两种加载模式：一次性加载一律树节点和懒加载模式。所谓懒加载模式，是指当需要开展父节点时才渲染子节点。懒加载模式的应用场景适合树节点数据量大的情形，在肯定程度上可以优化图形客户界面的响应效率以及提升客户体验。但是，懒加载模式对数据动态刷新应用需求的支持不尽如意。树形控件节点一旦开展就缓存在本地，后续不会再继续升级和刷新节点数据。本文将详情如何实现Element树形控件Tree在懒加载模式下的动态升级。具体需求如下图所示：

动态升级需求

当Select选择器选择箱变、逆变器、汇流箱或者组串等类型时，Tree树形控件会动态刷新显示相应类型的设施名称。我们知道在懒加载模式下，Tree树形控件节点一旦开展，就不再重新加载节点数据。那么如何实现在选择不同类型时动态刷新树形控件节点数据显示呢？一种实现思路是在Select选择器发生变化时，在change事件中清空Tree树形控件的一律子节点，而后再重新加载树形控件节点数据。关键代码如下图所示：

清空树形控件节点

首先，通过树形控件的父节点清空所有子节点数据，而后调用loadNode1方法重新构建树形控件懒加载数据。loadNode1是树形控件load属性指定的加载树的方法，该方法在加载树或者者开展某个节点时会被自动调用。

我们可以看到，传递给loadNode1方法有两个参数，this.node和this.resolve，这两个参数都是树形控件顶层节点属性数值。那么，是如何获取到这两个参数数值的呢？具体方法是：首先，申明node和reslove两个变量用于保存顶层节点的node和reslove数值。而后，在树形控件加载时将node.level===0情况下的node和reslove数值保存。如下图所示：

获取顶层节点

loadNode1内部是通过reslove方法，将数据逐级推至树形控件数据结构中的。先执行reslove方法的数据是父节点，后执行reslove方法的数据是子节点，在无子节点的情况下通过调用reslove([])实现。

结束语：至此，实现了Element的Tree树形控件懒加载模式下的节点数据动态升级。在子节点数据量大的情况下，懒加载和动态升级机制，在肯定程度上处理了响应效率问题，也提升了客户体验。