当前位置: 首页 > news >正文

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>

通过结合 lazyloaddefault-checked-keys 等属性,el-tree 提供了强大的功能,能够实现树形数据的懒加载、节点默认勾选和动态展开等需求。根据实际场景,可以灵活使用这些功能来满足需求。

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

相关文章:

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

文章目录 导文代码实现1. 基本结构2. 懒加载实现3. 默认勾选功能4. 动态加载初始节点5. 节点勾选事件监听完整代码 导文 在实际开发中&#xff0c;很多数据过于庞大&#xff0c;需要分批请求&#xff0c;使用到懒加载。但是在tree的方法中&#xff0c;使用懒加载后无法直接使用…...

零售交易流程相关知识(top-down拆解)

引入 关于POS机交易时的后台数据交互 模块之间数据交换&#xff0c;都可以能被窃取或篡改。由此引入加密、解密机制和签名、验签机制 经典的加密、解密机制&#xff1a; 对称加密&#xff1a;DES\ TDES\ AES\ RC4 非对称加密&#xff1a;RSA\ DSA\ ECC 经典的签名、验签…...

混合存储HDD+SSD机型磁盘阵列,配上SSD缓存功能,性能提升300%

企业日常运行各种文件无处不在&#xff0c;文档、报告、视频、应用数据......面对成千上万的文件&#xff0c;团队之间需要做到无障碍协作&#xff0c;员工能够即时快速访问、共享处理文件。随着业务增长&#xff0c;数字化办公不仅需要大容量&#xff0c;快速高效的文件访问越…...

将本地已有的项目上传至仓库

上传的仓库为Gitee 进入项目目录&#xff1a; 使用命令行工具进入你想要上传的项目的根目录。 初始化Git仓库&#xff1a; 如果项目目录尚未初始化为Git仓库&#xff0c;执行以下命令&#xff1a; git init 执行完成后&#xff0c;项目根目录下会自动生成一个隐藏的.git文件夹…...

中级网络工程师面试题参考示例(3)

一、企业园区网络 问题1&#xff1a;如何实现园区网络的自动化部署和管理&#xff1f;请结合实际场景说明技术选型。 答案要点&#xff1a; 技术选型&#xff1a; SDN&#xff08;软件定义网络&#xff09;&#xff1a;通过控制器&#xff08;如Cisco DNA Center&#xff09;…...

祝福语【算法赛】

题目来源&#xff1a;第 27 场 蓝桥入门赛【算法题】 可以参考一下&#xff0c;本人也是比较菜 不喜勿喷&#xff0c;求求求 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);String S sc.nextLi…...

前端 | CORS 跨域问题解决

问题&#xff1a;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 基础&#xff1a; 1、SQL语句的分类&#xff1a; DDL&#xff1a;用于控制数据库的操作DML&#xff1a;用于控制表结构的字段&#xff0c;增、删、修DQL&#xff1a;用于查询语句DCL&#xff1a;用于管理数据库&#xff0c;用户&#xff0c;数据库的访问 权限。 2、M…...

ChatGPT使用经验分享

ChatGPT 3.5模型 与 4模型的区别 ChatGPT 3.5 示例 问&#xff1a;树上有9只鸟&#xff0c;打死了一只还剩几只&#xff1f; 答&#xff1a;如果打死了一只鸟&#xff0c;那么树上还剩下8只鸟。 ChatGPT 4 示例 问&#xff1a;树上有9只鸟&#xff0c;打死了一只还剩几只&…...

Webshell原理与利用

本文内容仅用于技术研究、网络安全防御及合法授权的渗透测试&#xff0c;严禁用于任何非法入侵、破坏或未经授权的网络活动。 1. WebShell的定义与原理 定义&#xff1a;WebShell是一种基于Web脚本语言&#xff08;如PHP、ASP、JSP&#xff09;编写的恶意后门程序&#xff0c;…...

Java直通车系列15【Spring MVC】(ModelAndView 使用)

目录 1. ModelAndView 概述 2. ModelAndView 的主要属性和方法 主要属性 主要方法 3. 场景示例 示例 1&#xff1a;简单的 ModelAndView 使用 示例 2&#xff1a;使用 ModelAndView 处理列表数据 示例 3&#xff1a;使用 ModelAndView 处理异常情况 1. ModelAndView 概…...

大模型系列课程学习-基于Vllm/Ollama/Ktransformers完成Deepseek推理服务部署

1.机器配置及实验说明 基于前期搭建的双卡机器装机教程&#xff0c;配置如下&#xff1a; 硬件名称参数备注CPUE5-2680V42 *2&#xff08;线程28个&#xff09;无GPU2080TI-22G 双卡魔改卡系统WSL Unbuntu 22.04.5 LTS虚拟机 本轮实验目的&#xff1a;基于VLLM/Ollama/ktran…...

基于深度文档理解的开源 RAG 引擎RAGFlow的介绍和安装

目录 前言1. RAGFlow 简介1.1 什么是 RAGFlow&#xff1f;1.2 RAGFlow 的核心特点 2. RAGFlow 的安装与配置2.1 硬件与软件要求2.2 下载 RAGFlow 源码2.3 源码编译 Docker 镜像2.4 设置完整版&#xff08;包含 embedding 模型&#xff09;2.5 运行 RAGFlow 3. RAGFlow 的应用场…...

DNS Beaconing

“DNS Beaconing” 是一种隐蔽的网络通信技术&#xff0c;通常与恶意软件&#xff08;如木马、僵尸网络&#xff09;相关。攻击者通过定期发送 DNS请求 到受控的域名服务器&#xff08;C&C服务器&#xff09;&#xff0c;实现与恶意软件的隐蔽通信、数据传输或指令下发。由…...

【论文阅读】多模态——LSeg

文献基本信息 标题&#xff1a;Language-Driven Semantic Segmentation作者&#xff1a;Boyi Li、Kilian Q. Weinberger、Serge Belongie、Vladlen Koltun、Ren Ranftl单位&#xff1a;Cornell University、University of Copenhagen、Apple、Intel Labs会议/期刊&#xff1a;…...

vue3如何配置环境和打包

很多新手友友们或刚从vue2切换到vue3的同学&#xff0c;对vue3不同环境配置和打包有很多困惑的地方&#xff0c;Jenna这就把vue3打包配置流程详细的写下来&#xff0c;你们只需要copy就好啦 1.创建环境文件 当我们把项目拿到手&#xff0c;只需要创建三个环境文件&#xff1a…...

高并发下订单库存防止超卖策略

文章目录 什么是超卖问题&#xff1f;推荐策略&#xff1a;Redis原子操作(Redis incr)乐观锁lua脚本利用Redis increment 的原子操作&#xff0c;保证库存数安全update使用乐观锁LUA脚本保持库存原子性 什么是超卖问题&#xff1f; 在并发的场景下&#xff0c;比如商城售卖商品…...

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 安装依赖&#xff0c;这里是less&#xff0c;sass换成postcss-scss…...

用Deepseek写一个 HTML 和 JavaScript 实现一个简单的飞机游戏

大家好&#xff01;今天我将分享如何使用 HTML 和 JavaScript 编写一个简单的飞机游戏。这个游戏的核心功能包括&#xff1a;控制飞机移动、发射子弹、敌机生成、碰撞检测和得分统计。代码简洁易懂&#xff0c;适合初学者学习和实践。 游戏功能概述 玩家控制&#xff1a;使用键…...

three.js 在 webGL 添加纹理

在我们生成了3D设计之后&#xff0c;我们可以添加纹理使其更加吸引人。在 webGL 和 p5.js中&#xff0c;可以使用 gl.texImage2D() 和 texture() API来为形状应用纹理。 使用 webGL 在 webGL 中&#xff0c;gl.texImage2D() 函数用于从图像文件生成2D纹理。该函数接受许多参…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...