详解如何实现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树形控件懒加载模式下的节点数据动态更新。在子节点数据量大的情况下，懒加载和动态更新机制，在一定程度上解决了响应效率问题，也提升了用户体验。

补充:element ui 懒加载树节点内子项的动态更新

<el-tree
 :props="props1"
 :load="loadNode1"
 lazy
 show-checkbox>
</el-tree>
 
<script>
 export default {
  data() {
   return {
    props1: {
     label: 'name',
     children: 'zones',
     isLeaf: 'leaf'
    },
   };
  },
  methods: {
   loadNode1(node, resolve) {
    if (node.level === 0) {
     return resolve([{ name: 'region' }]);
    }
    if (node.level > 1) return resolve([]);
 
    setTimeout(() => {
     const data = [{
      name: 'leaf',
      leaf: true
     }, {
      name: 'zone'
     }];
 
     resolve(data);
    }, 500);
   }
  }
 };
</script>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享文章：详解如何实现Element树形控件Tree在懒加载模式下的动态更新-创新互联
网页网址：https://www.cdcxhl.com/article40/cejoho.html

成都网站建设公司_创新互联，为您提供外贸网站建设、定制开发、网页设计公司、企业网站制作、品牌网站制作、企业建站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联