vue+element|el-tree树设置懒加载和设置默认勾选

文章目录
- 导文
 - 代码实现
 - 1. 基本结构
 - 2. 懒加载实现
 - 3. 默认勾选功能
 - 4. 动态加载初始节点
 - 5. 节点勾选事件监听
 - 完整代码
 
导文
在实际开发中,很多数据过于庞大,需要分批请求,使用到懒加载。但是在tree的方法中,使用懒加载后无法直接使用default-checked-keys默认勾选。想要这个效果该如何实现?
 效果展示:
 
代码实现
在 Vue 项目中使用 Element UI 的 el-tree 组件时,树形数据的懒加载和默认勾选功能是常见的需求。以下是如何实现这两种功能的详细步骤:
1. 基本结构
el-tree 是 Element UI 提供的树形组件,支持懒加载、节点勾选等功能。以下是组件的基本结构:
<el-drawer v-if="drawerVisible" v-model="drawerVisible" title="角色权限" size="50%"><el-treeref="tree":props="treeProps":load="loadNode"lazyshow-checkboxnode-key="id":default-checked-keys="defaultCheckedKeys"@check="onCheckChange"/>
</el-drawer>
 
关键属性说明:
lazy:启用懒加载模式。load:懒加载数据的方法。show-checkbox:显示节点复选框。node-key:节点的唯一标识字段。default-checked-keys:默认勾选的节点 ID 数组。@check:节点勾选状态变化时触发的事件。
2. 懒加载实现
懒加载的核心是通过 load 方法动态加载节点数据。以下是一个示例:
methods: {loadNode(node, resolve) {if (node.level === 0) {// 加载根节点resolve([..//数据列表]);} else if (node.level === 1) {resolve([..//数据列表]);} else {// 其他层级返回空数组resolve([]);}}
}
 
实现逻辑:
- 根节点加载:当 
node.level === 0时,返回根节点数据。 - 子节点加载:根据父节点的 
id返回对应的子节点数据。 - 叶子节点标记:通过 
leaf: true标记节点为叶子节点,避免进一步加载。 
3. 默认勾选功能
通过 default-checked-keys 属性,可以设置默认勾选的节点。该属性接收一个数组,数组中的值为需要勾选的节点 ID。
data() {return {defaultCheckedKeys: ['role', 'user-list'] // 默认勾选的节点 ID};
}
 
在树加载完成后,el-tree 会自动勾选 defaultCheckedKeys 中指定的节点。
4. 动态加载初始节点
某些场景下需要在树加载完成后自动展开某些节点。可以通过 ref 获取树实例,并调用 expand 方法实现:
methods: {openDrawer() {this.drawerVisible = true;//第一种实现方法this.$nextTick(() => {this.loadInitialNodes();});//第二种实现方法setTimeout(() => {this.loadInitialNodes()}, 500)},loadInitialNodes() {if (this.$refs.tree) {// 展开根节点的所有子节点this.$refs.tree.root.childNodes.forEach(node => {node.expand();});}}
}
 
实现逻辑:
- 在 
openDrawer方法中,打开抽屉并等待 DOM 更新完成后调用loadInitialNodes。 - 在 
loadInitialNodes中,通过this.$refs.tree获取树实例,并遍历根节点的子节点,调用expand方法展开节点。 
5. 节点勾选事件监听
通过 @check 事件可以监听节点勾选状态的变化。事件回调函数会返回当前勾选的节点数据和节点对象。
methods: {onCheckChange(checkedData, checkedStatus) {console.log('当前勾选的节点数据:', checkedData);console.log('当前勾选状态:', checkedStatus);}
}
 
参数说明:
checkedData:当前勾选的节点数据。checkedStatus:包含勾选状态信息的对象,如checkedKeys(勾选的节点 ID 数组)、halfCheckedKeys(半勾选的节点 ID 数组)等。
完整代码
以下是完整的代码实现:
<template><el-drawer v-if="drawerVisible" v-model="drawerVisible" title="角色权限" size="50%"><el-treeref="tree":props="treeProps":load="loadNode"lazyshow-checkboxnode-key="id":default-checked-keys="defaultCheckedKeys"@check="onCheckChange"/></el-drawer>
</template><script>
export default {data() {return {drawerVisible: false,treeProps: {label: 'name',children: 'children',isLeaf: 'leaf'},defaultCheckedKeys: ['role', 'user-list']};},methods: {openDrawer() {this.drawerVisible = true;//第一种实现方法this.$nextTick(() => {this.loadInitialNodes();});//第二种实现方法setTimeout(() => {this.loadInitialNodes()}, 500)},loadNode(node, resolve) {if (node.level === 0) {// 加载根节点resolve([..//数据列表]);} else if (node.level === 1) {resolve([..//数据列表]);} else {// 其他层级返回空数组resolve([]);}},loadInitialNodes() {if (this.$refs.tree) {this.$refs.tree.root.childNodes.forEach(node => {node.expand();});}},onCheckChange(checkedData, checkedStatus) {console.log('当前勾选的节点数据:', checkedData);console.log('当前勾选状态:', checkedStatus);}}
};
</script>
 
通过结合 lazy、load、default-checked-keys 等属性,el-tree 提供了强大的功能,能够实现树形数据的懒加载、节点默认勾选和动态展开等需求。根据实际场景,可以灵活使用这些功能来满足需求。
您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。
相关文章:
vue+element|el-tree树设置懒加载和设置默认勾选
文章目录 导文代码实现1. 基本结构2. 懒加载实现3. 默认勾选功能4. 动态加载初始节点5. 节点勾选事件监听完整代码 导文 在实际开发中,很多数据过于庞大,需要分批请求,使用到懒加载。但是在tree的方法中,使用懒加载后无法直接使用…...
零售交易流程相关知识(top-down拆解)
引入 关于POS机交易时的后台数据交互 模块之间数据交换,都可以能被窃取或篡改。由此引入加密、解密机制和签名、验签机制 经典的加密、解密机制: 对称加密:DES\ TDES\ AES\ RC4 非对称加密:RSA\ DSA\ ECC 经典的签名、验签…...
混合存储HDD+SSD机型磁盘阵列,配上SSD缓存功能,性能提升300%
企业日常运行各种文件无处不在,文档、报告、视频、应用数据......面对成千上万的文件,团队之间需要做到无障碍协作,员工能够即时快速访问、共享处理文件。随着业务增长,数字化办公不仅需要大容量,快速高效的文件访问越…...
将本地已有的项目上传至仓库
上传的仓库为Gitee 进入项目目录: 使用命令行工具进入你想要上传的项目的根目录。 初始化Git仓库: 如果项目目录尚未初始化为Git仓库,执行以下命令: git init 执行完成后,项目根目录下会自动生成一个隐藏的.git文件夹…...
中级网络工程师面试题参考示例(3)
一、企业园区网络 问题1:如何实现园区网络的自动化部署和管理?请结合实际场景说明技术选型。 答案要点: 技术选型: SDN(软件定义网络):通过控制器(如Cisco DNA Center)…...
祝福语【算法赛】
题目来源:第 27 场 蓝桥入门赛【算法题】 可以参考一下,本人也是比较菜 不喜勿喷,求求求 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);String S sc.nextLi…...
前端 | CORS 跨域问题解决
问题:Access to fetch at http://localhost:3000/save from origin http://localhost:5174 has been blocked by CORS policy: Response to preflight request doesnt pass access control check: No Access-Control-Allow-Origin header is present on the request…...
MySQL知识点(第一部分)
MySQL 基础: 1、SQL语句的分类: DDL:用于控制数据库的操作DML:用于控制表结构的字段,增、删、修DQL:用于查询语句DCL:用于管理数据库,用户,数据库的访问 权限。 2、M…...
ChatGPT使用经验分享
ChatGPT 3.5模型 与 4模型的区别 ChatGPT 3.5 示例 问:树上有9只鸟,打死了一只还剩几只? 答:如果打死了一只鸟,那么树上还剩下8只鸟。 ChatGPT 4 示例 问:树上有9只鸟,打死了一只还剩几只&…...
Webshell原理与利用
本文内容仅用于技术研究、网络安全防御及合法授权的渗透测试,严禁用于任何非法入侵、破坏或未经授权的网络活动。 1. WebShell的定义与原理 定义:WebShell是一种基于Web脚本语言(如PHP、ASP、JSP)编写的恶意后门程序,…...
Java直通车系列15【Spring MVC】(ModelAndView 使用)
目录 1. ModelAndView 概述 2. ModelAndView 的主要属性和方法 主要属性 主要方法 3. 场景示例 示例 1:简单的 ModelAndView 使用 示例 2:使用 ModelAndView 处理列表数据 示例 3:使用 ModelAndView 处理异常情况 1. ModelAndView 概…...
大模型系列课程学习-基于Vllm/Ollama/Ktransformers完成Deepseek推理服务部署
1.机器配置及实验说明 基于前期搭建的双卡机器装机教程,配置如下: 硬件名称参数备注CPUE5-2680V42 *2(线程28个)无GPU2080TI-22G 双卡魔改卡系统WSL Unbuntu 22.04.5 LTS虚拟机 本轮实验目的:基于VLLM/Ollama/ktran…...
基于深度文档理解的开源 RAG 引擎RAGFlow的介绍和安装
目录 前言1. RAGFlow 简介1.1 什么是 RAGFlow?1.2 RAGFlow 的核心特点 2. RAGFlow 的安装与配置2.1 硬件与软件要求2.2 下载 RAGFlow 源码2.3 源码编译 Docker 镜像2.4 设置完整版(包含 embedding 模型)2.5 运行 RAGFlow 3. RAGFlow 的应用场…...
DNS Beaconing
“DNS Beaconing” 是一种隐蔽的网络通信技术,通常与恶意软件(如木马、僵尸网络)相关。攻击者通过定期发送 DNS请求 到受控的域名服务器(C&C服务器),实现与恶意软件的隐蔽通信、数据传输或指令下发。由…...
【论文阅读】多模态——LSeg
文献基本信息 标题:Language-Driven Semantic Segmentation作者:Boyi Li、Kilian Q. Weinberger、Serge Belongie、Vladlen Koltun、Ren Ranftl单位:Cornell University、University of Copenhagen、Apple、Intel Labs会议/期刊:…...
vue3如何配置环境和打包
很多新手友友们或刚从vue2切换到vue3的同学,对vue3不同环境配置和打包有很多困惑的地方,Jenna这就把vue3打包配置流程详细的写下来,你们只需要copy就好啦 1.创建环境文件 当我们把项目拿到手,只需要创建三个环境文件:…...
高并发下订单库存防止超卖策略
文章目录 什么是超卖问题?推荐策略:Redis原子操作(Redis incr)乐观锁lua脚本利用Redis increment 的原子操作,保证库存数安全update使用乐观锁LUA脚本保持库存原子性 什么是超卖问题? 在并发的场景下,比如商城售卖商品…...
vue安装stylelint
执行 npm install -D stylelint postcss-html stylelint-config-recommended-vue stylelint-config-standard stylelint-order stylelint-prettier postcss-less stylelint-config-property-sort-order-smacss 安装依赖,这里是less,sass换成postcss-scss…...
用Deepseek写一个 HTML 和 JavaScript 实现一个简单的飞机游戏
大家好!今天我将分享如何使用 HTML 和 JavaScript 编写一个简单的飞机游戏。这个游戏的核心功能包括:控制飞机移动、发射子弹、敌机生成、碰撞检测和得分统计。代码简洁易懂,适合初学者学习和实践。 游戏功能概述 玩家控制:使用键…...
three.js 在 webGL 添加纹理
在我们生成了3D设计之后,我们可以添加纹理使其更加吸引人。在 webGL 和 p5.js中,可以使用 gl.texImage2D() 和 texture() API来为形状应用纹理。 使用 webGL 在 webGL 中,gl.texImage2D() 函数用于从图像文件生成2D纹理。该函数接受许多参…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...
Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误,它们的含义、原因和解决方法都有显著区别。以下是详细对比: 1. HTTP 406 (Not Acceptable) 含义: 客户端请求的内容类型与服务器支持的内容类型不匹…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验,以及大语言模型的分析能力,我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际,我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测,聊作存档。等到明…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要:设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP(Work-in-Progress)弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中,设立专门的紧急任务通道尤为重要,这能…...
Python爬虫(一):爬虫伪装
一、网站防爬机制概述 在当今互联网环境中,具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类: 身份验证机制:直接将未经授权的爬虫阻挡在外反爬技术体系:通过各种技术手段增加爬虫获取数据的难度…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学(ECC)是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础,例如椭圆曲线数字签…...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...
Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理
引言 Bitmap(位图)是Android应用内存占用的“头号杀手”。一张1080P(1920x1080)的图片以ARGB_8888格式加载时,内存占用高达8MB(192010804字节)。据统计,超过60%的应用OOM崩溃与Bitm…...
