[element-ui] el-tree 懒加载load

懒加载:点击节点时才进行该层数据的获取。

注意:使用了懒加载之后,一般情况下就可以不用绑定:data。

<el-tree :props="props" :load="loadNode" lazy></el-tree>

懒加载—由于在点击节点时才进行该层数据的获取,默认情况下 Tree 无法预知某个节点是否为叶子节点,所以会为每个节点添加一个下拉按钮,如果节点没有下层数据,则点击后下拉按钮会消失。同时,你也可以提前告知 Tree 某个节点是否为叶子节点,从而避免在叶子节点前渲染下拉按钮。

loadNode(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);}
}

手动触发load更新

推荐,此方法有效避免直接调用loadNode(node, resolve)函数,可以间接从组件内部触发load事件,这样就不需要缓存resolve这个不好拿到的入参。省去后续很多麻烦事,特别是由于懒加载只加载一次导致缓存的数据和方法不匹配当前点击的节点,从而导致增删改树结构数据时显示异常的问题,方法2中有详细说明。

   
refreshNode(key) {// 获取当前节点,key可以在@node-click和:load绑定函数的回调参数node用变量存储后有需要刷新的地方取node.keylet node = this.$refs.tree.getNode(key);//  设置未进行懒加载状态node.loaded = false;// 重新展开节点就会间接重新触发load达到刷新效果node.expand();},

手动触发load更新 方法2

可以在第一次懒加载数据的时候,把 loadNode 的 2 个参数保存下来,然后添加节点的时候,重新调用一下这个方法就可以了

不推荐,由于loadNode只会针对某个节点加载一次,后续再点击你点过的这个节点的小箭头不会再次触发loadNode,这容易让缓存的两个数据this.node和this.resolve与当前点击节点不匹配(比如你点击了未懒加载过的小箭头,再去点已经懒加载过的其他小箭头或者节点,这时候由于已懒加载的不会再触发loadNode函数,而你缓存的this.node和this.resolve却是上一次的,这种情况下如果你在当前点击的节点对子节点进行增删改请求后去手动调用loadNode传入this.node和this.resolve刷新树节点,由于传入的数据都是上一次的,那么就会出现你请求的新的树节点数据跑到上一次触发懒加载缓存的节点去的情况,这时树结构的数据就显示异常了)

// 节点懒加载事件
loadNode (node, resolve) {// loadNode 的 2 个参数保存下来方便下次手动调用传入this.node = nodethis.resolve = resolve// 你的请求逻辑......
},
refreshNode () {this.node.childNodes = [] // 这里把子节点清空,是因为再次调用 loadNode 的时候会往 childNodes 里 push 节点,所以会有节点重复的情况。// 把刚刚存的两个变量手动传入调用this.loadNode(this.node, this.resolve)
},

手动触发load更新

async loadNode(node, resolve) {if (node.level === 0) { // 加载第一级节点(年份)return resolve(await this.getYearList());}if (node.level === 1) { // 加载第二级节点(月份)return resolve(await this.getMonthList(node));}return resolve([]);
},
// 调用接口 ,获取年份数据
getYearList(){return data
},// 调用接口 ,根据年份获取月份数据
getMonthList(node){return data
}
// 想要重新获取一级节点,直接调用
this.getYearList()// 想要重新获取二级节点,直接调用
this.getMonthList(node)


参考:
2021-09-06 el-tree 懒加载load 手动触发load更新的三种方法

el-tree手动触发懒加载load

ElementUi Tree树形控件的使用(增、删)

ElementUI tree 懒加载 手动刷新数据

el-tree 在 el-dialog 显示时 重新加载 el-tree (el-tree采用懒加载)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/63616.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JVM第一篇 认识java虚拟机

目录 1. 什么是java虚拟机 2. java虚拟机分类 2.1. 商用虚拟机 2.2. 嵌入式虚拟机 3.java虚拟机架构 4.java虚拟机运行过程 1. 什么是java虚拟机 传统意义上的虚拟机是一种抽象化的计算机&#xff0c;通过在实际的计算机上仿真模拟各种计算机功能来实现的&#xff0c;是操…

jsch网页版ssh

使用依赖 implementation com.jcraft:jsch:0.1.55Server端代码 import com.jcraft.jsch.Channel; import com.jcraft.jsch.JSch; import com.jcraft.jsch.Session; import java.io.InputStream; import java.io.OutputStream; import java.util.concurrent.TimeUnit; import o…

【C++进阶(三)】STL大法--vector迭代器失效深浅拷贝问题剖析

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习C   &#x1f51d;&#x1f51d; vector-下 1. 前言2. 什么是迭代器失效?3. 迭代…

GitHub 标星 15w,如何用 Python 实现所有算法?

学会了 Python 基础知识&#xff0c;想进阶一下&#xff0c;那就来点算法吧&#xff01;毕竟编程语言只是工具&#xff0c;结构算法才是灵魂。 新手如何入门 Python 算法&#xff1f; 几位印度小哥在 GitHub 上建了一个各种 Python 算法的新手入门大全。从原理到代码&#xf…

ClickHouse进阶(六):副本与分片-2-Distributed引擎

进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; &#x1f3e1;个人主页&#xff1a;含各种IT体系技术,IT贫道_Apache Doris,大数据OLAP体系技术栈,Kerberos安全认证-CSDN博客 &#x1f4cc;订阅…

【项目设计】高并发内存池(Concurrent Memory Pool)

目录 1️⃣项目介绍 &#x1f359;项目概述 &#x1f359;知识储备 2️⃣内存池介绍 &#x1f359;池化技术 &#x1f359;内存池 &#x1f359;内存池主要解决的问题 &#x1f365;内碎片 &#x1f365;外碎片 &#x1f359;malloc 3️⃣ 定长内存池设计 4️⃣ 项…

channel并发编程

不要通过共享内存通信&#xff0c;要通过通信共享内存。 channel是golang并发编程中一种重要的数据结构&#xff0c;用于多个goroutine之间进行通信。 我们通常可以把channel想象成一个传送带&#xff0c;将goroutine想象成传送带周边的人&#xff0c;一个传送带的上游放上物品…

打破对ChatGPT的依赖以及如何应对ChatGPT的错误和幻觉

​ OpenAI的ChatGPT是第一个真正流行的生成式AI工具&#xff0c;但它可能不是最好的。现在是时候扩大你的AI视野了。 ChatGPT成为了基于大语言模型(LLM)的聊天机器人的同义词。但是现在是时候停止对ChatGPT的痴迷&#xff0c;开始发现这个新世界中强大的替代品了。 首先&a…

【内推码:NTAMW6c】 MAXIEYE智驾科技2024校招启动啦

MAXIEYE智驾科技2024校招启动啦【内推码&#xff1a;NTAMW6c】 【招聘岗位超多&#xff01;&#xff01;公司食堂好吃&#xff01;&#xff01;】 算法类&#xff1a;感知算法工程师、SLAM算法工程师、规划控制算法工程师、目标及控制算法工程师、后处理算法工程师 软件类&a…

python 深度学习 解决遇到的报错问题4

目录 一、DLL load failed while importing _imaging: 找不到指定的模块 二、Cartopy安装失败 三、simplejson.errors.JSONDecodeError: Expecting value: line 1 column 1 (char 0) 四、raise IndexError("single positional indexer is out-of-bounds") 五、T…

操作系统中一些零散的知识点

第三章 内存管理 在虚拟内存系统中&#xff0c;虚拟内存的最大容量是由计算机的地址结构&#xff08;CPU寻址范围&#xff09;确定的&#xff0c;而虚拟内存的实际容量是受到“内存大小磁盘空间大小”、“地址线位数”共同制约&#xff0c;取二者最小值实现虚拟内存管理必须有…

Linux定时删除文件

Linux定时删除文件 ************************************sh文件内容************************************************** #!/bin/sh #find 对应目录 -mtime 天数 -name “文件名” -exec rm -rf {} ; #find&#xff1a;linux的查找命令&#xff0c;用户查找指定条件的文件&a…

Lvs+KeepAlived高可用高性能负载均衡

目录 1.环境介绍 2.配置keepalived 3.测试 1.测试负载均衡 2.测试RS高可用 3.测试LVS高可用 3.1测试lvs主服务宕机 3.2.测试lvs主服务器恢复 4.我在实验中遇到的错误 1.环境介绍 环境&#xff1a;centos7 RS1---RIP1:192.168.163.145 VIP 192.168.163.200 RS2---RIP2…

无涯教程-Android Studio函数

第1步-系统要求 您将很高兴知道您可以在以下两种操作系统之一上开始Android应用程序的开发- MicrosoftWindows10/8/7/Vista/2003(32或64位)MacOSX10.8.5或更高版本,最高10.9(小牛) GNOME或KDE桌面 第二点是,开发Android应用程序所需的所有工具都是开源的,可以从Web上下载。以…

【Interaction交互模块】ActionPublisher/ActionReciever

文章目录 需求案例原理0、相应准备1、发布器、接收器2、将把两者联系起来3、前提状态 补充 需求 Interactor只能将一个动作&#xff08;如按下手柄抓取键&#xff09;&#xff0c;传递给Interactble,如果要传两个或多个&#xff0c;就需要用发布器和接收器。 案例 右手柄抓取…

Holistic Evaluation of Language Models

本文是LLM系列文章&#xff0c;针对《Holistic Evaluation of Language Models》的翻译。 语言模型的整体评价 摘要1 引言2 前言3 核心场景4 一般指标5 有针对性的评估6 模型7 通过提示进行调整8 实验和结果9 相关工作和讨论10 缺失11 不足和未来工作12 结论 摘要 语言模型&a…

小疆智控CANOpen转PROFINET网关连接EA180C CANOPEN总线型伺服配置案例

1、首先新建一个工程&#xff0c;在CanOpen转Profinet网关配置软件中添加主站设备&#xff0c;如下图&#xff1b; 2、在CanOpen转Profinet网关设备点击导入EA180C CANOPEN总线型伺服 EDS 文件&#xff0c;右键添加从属设备&#xff1b; 3、设备设置站地址&#xff0c;如图&…

云原生架构:在云环境中构建弹性应用

随着云计算技术的快速发展&#xff0c;云原生架构已经成为现代软件开发的热门话题。作为一种在云环境中构建和运行应用程序的方法论&#xff0c;云原生架构强调弹性、可扩展性和灵活性&#xff0c;使开发者能够更好地应对复杂的业务需求。本文将深入探讨云原生架构的核心概念、…

ESLint如何在vue3项目中配置和使用

目录 问题描述&#xff1a; 配置&#xff1a; 注意&#xff1a; 问题描述&#xff1a; 在用vite创建vue3项目时已经选择了添加ESLint&#xff0c;创建完成后使用 pnpm install命令&#xff08;或者npm i&#xff09;安装了项目依赖之后&#xff0c;ESLint在项目中需要怎样配…

TDesign表单rules通过函数 实现复杂逻辑验证输入内容

Element ui 中 我们可以通过validator 绑定函数来验证一些不在表单model中的值 又或者处理一下比较复杂的判断逻辑 TDesign也有validator 但比较直观的说 没有Element那么好用 这里 我们给validator绑定了我们自己的checkAge函数 这个函数中 只有一个参数 value 而且 如果你的…