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纹理。该函数接受许多参…...
Xshell远程连接Kali(默认 | 私钥)Note版
前言:xshell远程连接,私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版,柱状图PPT模版,线状图PPT模版,折线图PPT模版,饼状图PPT模版,雷达图PPT模版,树状图PPT模版 图表类系列各种样式PPT模版分享:图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型(LLM)参数规模的增长,推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长,而KV缓存的内存消耗可能高达数十GB(例如Llama2-7B处理100K token时需50GB内存&a…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板,就像一个模具,里面可以将不同类型的材料做成一个形状,其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式:templa…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由:大部分的转换软件需要收费,要么功能不齐全,而开会员又用不了几次浪费钱,借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...
人机融合智能 | “人智交互”跨学科新领域
本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...
