详细说明如何在惰性加载模式下实现元素树控件树的动态更新

Element提供的Tree树控件可以以清晰的层次结构显示信息，也可以展开或折叠。树支持两种加载模式：一次加载所有树节点和惰性加载模式。所谓的惰性加载模式，是指当父节点需要扩展时，渲染子节点。惰性加载模式的应用场景适用于树节点中的大量数据，可以优化图形用户界面的响应效率，在一定程度上提升用户体验。但是，惰性加载模式不支持数据动态刷新的应用需求。树控制节点一旦展开，就在本地缓存，节点数据不会不断更新刷新。本文将介绍如何在惰性加载模式下实现元素树控件树的动态更新。具体要求如下图所示：

动态更新要求

当选择选择器选择箱式变压器、逆变器、接线盒或组串时，树形控件将动态刷新并显示相应类型的设备名称。我们知道在惰性加载模式下，一旦Tree树控件的节点被展开，节点数据就不会被重新加载。那么在选择不同类型时，如何动态刷新树控件节点的数据显示呢？实现这一点的一种方法是，当选择选择器改变时，在改变事件中清空树控件的所有子节点，然后重新加载树控件的节点数据。密钥代码如下图所示：

空树控制节点

首先，通过树控件的父节点清除所有子节点数据，然后调用loadNode1方法重建树控件以延迟加载数据。LoadNode1是加载树控件的load属性指定的树的方法，在加载树或展开节点时会自动调用。

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

获取顶级节点

在loadNode1内部，数据通过reslove方法一步步推送到树控件的数据结构中。先执行reslove方法的数据是父节点，后执行reslove方法的数据是子节点，在没有子节点的情况下通过调用reslove([])来实现。

结论：到目前为止，已经实现了元素树树控件的惰性加载模式下的节点数据动态更新。惰性加载和动态更新机制可以在一定程度上解决响应效率问题，提升用户体验。

补充：元素ui的惰性加载树节点中子项的动态更新

El-tree : props=' prop S1 ' : load=' load node 1 ' lazy show-checkbox/El-tree脚本导出默认值{ data(){ return { prop s : { label : ' name '，children: 'zones '，isLeaf: ' leaf ' }，}；}，methods: { loadNode1(节点，解析){ if(node . level===0){ return resolve([{ name : ' region ' }])；} if (node.level 1)返回resolve([])；setTimeout(()={ const data=[{ name : ' leaf '，leaf: true }，{ name : ' zone ' }]；解析(数据)；}, 500);} } };/script上面的代码是元素ui官方sloth加载的一个例子。实现是添加lazy，绑定一个load属性，点击节点时，会触发loadNode1的方法，数据刷入被点击的节点。

这里的问题是，如果节点有加载数据，再次点击不会触发loadNode1的方法，但是该节点下的子节点可能会被动态添加或删除

解决方案是：

1.获取选定的节点

2.删除选定节点的所有子节点

3.手动将所选节点的子节点数据刷入节点

我查了element ui的源代码，这里用的是源代码中的方法，所以我们实现起来非常方便，只要需要三行代码就可以了

函数refreshLazyTree(节点，子级){ var children=node . childnodes children . splice(0，子级。长度)节点。docreatechild(子级)} 1。Node是选中的节点(即点击展开的节点)，可以通过element ui中的getNode方法获取，也可以通过监控@node-click事件直接获取。

2.子节点是节点的子节点

3.通过拼接方法删除节点节点下的所有子节点

4.可以调用Docreatechild来创建子项

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。