详解如何实现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>

上面代码是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了

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

赞 (0)

相关推荐

  • Python利用ElementTree模块处理XML的方法详解

    前言 最近因为工作的需要,在使用 Python 来发送 SOAP 请求以测试 Web Service 的性能,由于 SOAP 是基于 XML 的,故免不了需要使用 python 来处理 XML 数据.在对比了几种方案后,最后选定使用 xml.etree.ElementTree 模块来实现. 这篇文章记录了使用 xml.etree.ElementTree 模块常用的几个操作,也算是总结一下,免得以后忘记了.分享出来也方法需要的朋友们参考学习,下面话不多说了,来一起看看详细的介绍吧. 概述 对比其他

  • Python中使用ElementTree解析XML示例

    [XML基本概念介绍] XML 指可扩展标记语言(eXtensible Markup Language). XML 被设计用来传输和存储数据. 概念一: 复制代码 代码如下: <foo>      # foo元素的起始标签  </foo>     # foo元素的结束标签             # note: 每一个起始标签必须有对应的结束标签来闭合, 也可以写成<foo/> 概念二: 复制代码 代码如下: <foo>           # 元素可以嵌套

  • Element-ui tree组件自定义节点使用方法代码详解

    工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~ <template> <div class="sortDiv"> <el-tree :data="sortData" draggable node-key="id" ref="sortTree" default-expand-all :expand-

  • python xml.etree.ElementTree遍历xml所有节点实例详解

    python xml.etree.ElementTree遍历xml所有节点 XML文件内容: <students> <student name='刘备' sex='男' age='35'/> <student name='吕布' sex='男' age='38'/> <student name='貂蝉' sex='女' age='22'/> </students> 代码: #-*- coding: UTF-8 -*- # 从文件中读取数据 imp

  • vue.js element-ui tree树形控件改iview的方法

    vue.js element-ui tree树形控件改iview的方法

    element-ui组件的tree树形控件修改源码改为iview组件 实现原理 修改了element-ui源码,把源码里面的tree模块提取出来 然后修改element自带checkbox等组件为iview的checkbox,并且兼容方法 最后修改element样式,改为iview风格,自己也添加了一些样式 新的tree组件可以说是element的逻辑,iview的风格 <template> <div @click.stop="handleClick" v-show=

  • 详解vue-element Tree树形控件填坑路

    通过tree树形控件的default-checked-keys属性来设置默认选中的节点 html.vue <el-form-item label="角色权限:"> <el-tree :data="data2" show-checkbox node-key="id" @check="handleNodeClick" :default-expanded-keys="[]" ref="

  • vue elementUI tree树形控件获取父节点ID的实例

    首先找到element-ui.common.js文件 如下 具体看你工程下的node_modules D:\workSpace\vue_manage\node_modules\element-ui\lib\element-ui.common.js 找到getCheckedNodes该方法 细节如下我的该方法在21618行 TreeStore.prototype.getCheckedNodes = function getCheckedNodes() { var leafOnly = argume

  • 在element-ui的el-tree组件中用render函数生成el-button的实例代码

    本文主要介绍怎么在el-tree组件中通过render函数来生成el-button. 这是element-ui中el-tree树: 这是需要实现的效果: tree.vue文件中,具体实现的代码如下: <template> <el-tree :data="treeData" :props="defaultProps" show-checkbox node-key="id" default-expand-all :expand-on

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

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

  • Vue element树形控件添加虚线详解

    Vue element树形控件添加虚线详解

    目录 1.实现效果 2.实现代码 3.其他实现 总结 1.实现效果 2.实现代码 树形控件虚线的添加主要通过控制css来实现,并且在树形控件的缩进数只能为0,令class="mytree" <div class="mytree"> <!--indent只能为0--> <el-tree :data="tree_data" :props="defaultProps" @node-click="

  • Element树形控件整合带图标的下拉菜单(tree+dropdown+input)

    Element树形控件整合带图标的下拉菜单(tree+dropdown+input)

    目录 需求说明: 实现步骤: 本文主要讲述:自定义树形控件<el-tree> 需求说明: Element UI 官网提供的树形控件包含基础的.可选择的.自定义节点内容的.带节点过滤的以及可拖拽节点的树形结构 如下: 我想要的效果是支持搜索效果的树,将鼠标悬浮后显示添加修改图标,点击图标后弹出对应页面:并且在每个文件夹前添加自定义图标. 实现效果: 实现步骤: 1.使用插槽(slot) <el-col :span="4" :xs="24"> &

  • vue通过element树形控件实现树形表格

    vue通过element树形控件实现树形表格

    目录 实现效果图 安装依赖 自定义树形控件 其他实现 总结 在vue中通过element树形控件来实现树形表格的效果 通过缩进来实现近似树形表格的效果 实现效果图 安装依赖 $ npm install element-plus --save Element官网 自定义树形控件 分析图中控件分布,每个参数都有固定的width,通过width让数值达到对齐的效果 代码主要通过renderContent函数来自定义树形控件 <template> <div class="mytree&

  • Element树形控件el-tree懒加载并设置默认展开和选中的效果

    使用elementui树组件,通过懒加载加载数据,并设置默认展开和全部选中的效果. <el-tree :load="loadNode" node-key="org_id" is-connection-line show-checkbox lazy :default-checked-keys="defaultSelectCids" :default-expanded-keys="defaultExpandedCids" :

  • 详解WPF如何在基础控件上显示Loading等待动画

    WPF 如何在基础控件上显示 Loading 等待动画 框架使用.NET4 至 .NET6: Visual Studio 2022; 使用方式需引入命名空间后设置控件的附加属性 wd:Loading.IsShow="true",即可显示默认等待动画效果如下: 如需自定义 Loading 一定要 先设置 wd:Loading.Child 在设置 IsShow="true" . 显示不同 Loading 内容需 wd:Loading.Child ={x:Static w

  • 详解JS与APP原生控件交互

    详解JS与APP原生控件交互

    "热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显得重要,不可能每次发布一个活动,都要发布一个现版本,当然这样对于Android还算可以,但是对于Ios呢?苹果应用商店每次审核的时间基本都在1~2周,这对于一个促销活动来说审核时间实在太长.而混合式开发正好可以解决这个问题,基本的原理时,通过原生控件实现APP的主体结构,借助H5开发对应的页面,这样每次发布活

  • VS2010/MFC编程（常用控件：树形控件Tree Control控件创建h和实例）

    VS2010/MFC编程（常用控件：树形控件Tree Control控件创建h和实例）

    前面一节讲了树形控件Tree Control的简介.通知消息以及相关数据结构,本节继续讲下半部分,包括树形控件的创建.CTreeCtrl类的主要成员函数和应用实例. 树形控件的创建 MFC为树形控件提供了CTreeCtrl类,它封装了树形控件的所有操作. 树形控件的创建也是有两种方式,一种是在对话框模板中直接拖入Tree Control控件创建,另一种就是通过CTreeCtrl类的Create成员函数创建.下面主要讲后者. CTreeCtrl类的Create成员函数的原型如下: virtual

  • Qt中树形控件Tree Widget的使用方法汇总

    Qt中树形控件Tree Widget的使用方法汇总

    最近需要用到Tree Widget树形控件,现将自己的一些理解记录下来. Tree Widget在项目控件组(Item Widgets)里面可以找到.这种控件其实有时还是很有用处的,我主要利用的是带有复选框的树形控件.结果如图所示; 当选中顶层的树形节点时,子节点全部被选中:当取消选择顶层树形节点时,子节点的选中状态将全部被取消,二当选中子节点是,父节点显示部分选中的状态. 几个主要的函数: setCheckState设置复选框: ItemIsUserCheckable 项目上是否有复选框 It

  • vue树形控件tree的使用方法

    vue树形控件tree的使用方法

    本文实例为大家分享了vue树形控件tree使用的具体代码,供大家参考,具体内容如下 <template>   <div class="hello tree-container">     <el-tree       :data="data"       show-checkbox       node-key="id"       class="tree"       :allow-drop=&

随机推荐