当前位置: 首页 > 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纹理。该函数接受许多参…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

MinIO Docker 部署:仅开放一个端口

MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...

Bean 作用域有哪些?如何答出技术深度?

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...