详解如何实现Element树形控件Tree在懒加载模式下的动态更新


Posted in Javascript onApril 25, 2019

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

详解如何实现Element树形控件Tree在懒加载模式下的动态更新

动态更新需求

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

详解如何实现Element树形控件Tree在懒加载模式下的动态更新

清空树形控件节点

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

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

详解如何实现Element树形控件Tree在懒加载模式下的动态更新

获取顶层节点

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>

上面代码是element ui官方树懒加载的实例。实现就是添加lazy,绑定一个load属性,点击节点的时候,就会触发loadNode1的方法,将数据刷到点击的节点里面。

这里的问题是:如果该节点load过数据,再次点击是不会触发loadNode1这个方法的,但是这个节点下的子节点也许会动态增加或者删除

解决的思路是:

1、得到选中的节点

2、将选中节点的子节点全部删除

3、将选中节点的子节点数据手动刷到该节点内

我查过element ui源码,这里用到源码内的方法,所以我们实现下来很方便,只要三行代码

function refreshLazyTree(node, children) {
 var theChildren = node.childNodes
 theChildren.splice(0, theChildren.length)
 node.doCreateChildren(children)
}

1、node就是选中的的节点(也就是点击展开的节点),你可以通过element ui里的getNode方法获得,也可以直接监听@node-click事件直接获取选中的节点。

2、children就是node这个节点的子项

3、通过splice方法删除node节点下的所有子项

4、调用doCreateChildren创建子项就ok了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 #Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 #Javascript
微信小程序实现的五星评价功能示例
Apr 25 #Javascript
微信小程序实现单列下拉菜单效果
Apr 25 #Javascript
Vue组件通信的几种实现方法
Apr 25 #Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 #Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 #Javascript
You might like
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
图解javascript作用域链
2019/05/27 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
python 网络爬虫初级实现代码
2016/02/27 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
python构建深度神经网络(续)
2018/03/10 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
经销商会议欢迎词
2014/01/11 职场文书
个人承诺书怎么写
2014/05/24 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
服务员岗位职责
2015/02/03 职场文书
护士个人年度总结范文
2015/02/13 职场文书
社区节水倡议书
2015/04/29 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书