详解如何实现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 相关文章推荐
javascript之函数直接量(function(){})()
Jun 29 Javascript
JavaScript 序列化对象实现代码
Dec 18 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
js获取微信版本号的方法
May 12 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 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
Yii2.0建立公共方法简单示例
2019/01/29 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
jquery延迟加载外部js实现代码
2013/01/11 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
python追加元素到列表的方法
2015/07/28 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
python操作文件的参数整理
2019/06/11 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
Linux Interview Questions For software testers
2012/06/02 面试题
行政主管岗位职责
2013/11/18 职场文书
农救科工作职责
2013/11/27 职场文书
单位在职证明范本
2014/01/09 职场文书
个人安全承诺书
2014/05/22 职场文书
病危通知书样本
2015/04/17 职场文书
经营场所使用证明
2015/06/19 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
体育部部长竞选稿
2015/11/21 职场文书
MYSQL常用函数介绍
2022/05/05 MySQL