树组件 el-tree 数据回显

树组件 el-tree 数据回显

树型结构的数据回显问题:

这里我只放了核心代码,主要是如何获取选中的树节点的id集合如何根据树节点的id集合回显数据
大家根据需要自行更改!

	<el-tree ref="authorityRef" node-key="id" :data="allAuthorityList" show-checkbox default-expand-all empty-text="加载中,请稍候" :props="defaultProps"> </el-tree>
	const authorityRef = ref(ElTree)const defaultProps = {children: 'childrenList',label: 'name'}//1、如何获取选中的树节点的id集合!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!//我这里是通过Tree 组件的`getCheckedNodes`方法先获取到当前选中节点的数组然后再取其id值const checkedMenuAllIds = authorityRef.value.getCheckedNodes(false, true).map((node: any) => node.id)//如果传参要求只要最后一级的id值,可以再过滤处理一下const checkedMenuAllIds: number[] = authorityRef.value.getCheckedNodes(false, true).filter((node) => !node.childrenList || node.childrenList.length === 0).map((node) => Number(node.id)) //只传最后一级的id//2、如何根据树节点的id集合回显数据!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!//首先肯定是获取到树结构数据,为确保DOM更新后才调用setChecked,我这里使用nextTick//获取成功后,我这里是通过Tree 组件的`setChecked`方法设置节点是否被选中// 获取树级列表const { executeBody: fetGetCheckLibraryTree } = useRequest(api_get_checkLibrary_Tree(), {onSuccess(res: any) {allAuthorityList.value = res//注意:确保数组里面的id类型与树形结构中的id类型匹配!//这里的props.checkedAllId就是树节点的id集合,例如[ "1","574850805256267","574850805260359","574850805260357","574850805260361"]if (props.checkedAllId) {// 回显已拥有的结构nextTick(() => {props.checkedAllId.forEach((id) => {authorityRef.value?.setChecked(id, true, false)//核心代码就这一句!})})}}})

如果后端返回的数据不是树节点的id集合组成的数组结构,这里我的后端给我的是树型结构,我是通过递归处理的

	// 递归函数来提取 checkIdsfunction extractCheckIds(checkIds, result: string[]) {checkIds.forEach((checkId) => {result.push(checkId.id);if (checkId.childrenList && checkId.childrenList.length > 0) {extractCheckIds(checkId.childrenList, result);}});}//使用时if (res.checkIds && res.checkIds.length > 0) {const checkedAllIds: string[] = [];extractCheckIds(res.checkIds,checkedAllIds);}

实现效果:
在这里插入图片描述

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

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

相关文章

SSH访问控制:精确管理你的服务器门户

“ 在数字世界中&#xff0c;服务器的安全性是任何网络管理员的首要任务。特别是对于远程登录协议如SSH&#xff0c;确保只有授权用户可以访问是至关重要的。 今天&#xff0c;记录两种有效的方法来控制用户对特定服务器的访问&#xff1a;通过sshd_config实现黑/白名单机制和利…

【Python】pandas:替换值、添加行/列,删除行/列,更改形状(含数据透视表)

pandas是Python的扩展库&#xff08;第三方库&#xff09;&#xff0c;为Python编程语言提供 高性能、易于使用的数据结构和数据分析工具。 pandas官方文档&#xff1a;User Guide — pandas 2.2.2 documentation (pydata.org) 帮助&#xff1a;可使用help(...)查看函数说明文…

前端面试宝典【HTML篇】【4】

欢迎来到《前端面试宝典》,这里是你通往互联网大厂的专属通道,专为渴望在前端领域大放异彩的你量身定制。通过本专栏的学习,无论是一线大厂还是初创企业的面试,都能自信满满地展现你的实力。 核心特色: 独家实战案例:每一期专栏都将深入剖析真实的前端面试案例,从基础知…

【区块链+绿色低碳】山东邹平:区块链生态环境监管平台 | FISCO BCOS应用案例

山东省滨州市生态环境局邹平分局通过实地考察和调研发现&#xff0c;执法大队在执法工作中存在各排污企业设备系统无 法互通、终端采集数据固证难且可信度低、环境执法电子证据采集规则与司法采信标准不统一等痛点。而区块链 的分布式记账、不易篡改性和智能合约自动执行机制&a…

【源码+文档+调试讲解】学生党务学习系统的设计与实现

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统大学生党务学习平台信息管理难度大&#xff0c;容错率低&…

前端技术回顾系列 14 | 总结 + Vue 3.x 必修课

欢迎关注公众号&#xff1a;CodeFit 创作不易&#xff0c;如果你觉得这篇文章对您有帮助&#xff0c;请不要忘了 点赞、分享 和 关注&#xff0c;为我的 持续创作 提供 动力&#xff01; 1. 回顾系列的初衷和目标 在六月初&#xff0c;我开始编写 「前端技术回顾系列 2024」&a…

C++基础知识:构造函数的分类和调用,有参构造和无参构造,有参构造和无参构造,三种调用方式:括号法,显示法,隐式转换法,以及相关代码演示和注意事项

1.构造函数的分类及调用: 2.两种分类方式: 按参数分为: 有参构造和无参构造 按类型分为:有参构造和无参构造 3.三种调用方式: 括号法 显示法 隐式转换法 2.调用方法代码演示 1.括号法代码演示&#xff1a; #include<iostream>using namespace std;//1.构造函数的分类和…

8、springboot3 vue3开发平台-后端-使用aop 添加系统访问日志

1. 添加依赖&#xff0c; 创建数据库 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId></dependency><!-- IP地址解析 --><dependency><groupId>org.lionsou…

1000W长连接,如何建立和维护?千万用户IM 架构设计

1000W长连接&#xff0c;如何建立和维护&#xff1f;千万用户IM 架构设计 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如得物、阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格&#xff0c;遇到很多很重要的架构类/设计类…

【Vulnhub靶场AI-WEB-1.0打靶教程】

第一步&#xff1a;查看虚拟机的ip 第二步&#xff1a;扫描ip下开放的80端口 第三步&#xff1a;扫描查到的ip地址下的目录 第四步&#xff1a;访问查到的目录 访问robot.txt 第五步:访问robot.txt显示出的目录 第六步&#xff1a;打开kali终端&#xff0c;使用sqlmap功能 sq…

YOLO:训练自己的样本数据集进行目标检测

作者&#xff1a;CSDN _养乐多_ 本文将介绍如何使用python语言和 ultralytics 库训练自己的数据集&#xff0c;并进行 YOLO 目标检测模型训练和推理的代码。 文章目录 一、样本数据集准备1.1 标注工具1.2 数据集格式1.2.1 图片和标签数据集制作1.2.2 data.yaml制作 二、模型训…

canvas根据图片生成粒子动画

canvas根据图片生成粒子动画 效果展示&#xff1a; canvas根据图片生成粒子动画效果 注意&#xff1a; js和css的引入 id&#xff1a; cartoonDot-img对应的是被 拷贝的图像&#xff0c;后期要替换的 粒子图像就在这 min.js 地址 HTML代码块 <!DOCTYPE html> <h…

系统架构师考点--系统架构设计(中)

大家好。今天继续总结一下系统架构设计的一些考点。 一、软件架构复用 软件产品线是指一组软件密集型系统&#xff0c;它们共享一个公共的、可管理的特性集&#xff0c;满足某个特定市场或任务的具体需要&#xff0c;是以规定的方式用公共的核心资产集成开发出来的。即围绕核…

SpringBoot 日志:从基础到高级的全面指南

&#x1f4da; SpringBoot 日志&#xff1a;从基础到高级的全面指南 &#x1f50d; &#x1f4da; SpringBoot 日志&#xff1a;从基础到高级的全面指南 &#x1f50d;摘要引言正文内容一、日志概述 &#x1f4dc;二、日志使用 &#x1f4dd;2.1 打印日志 &#x1f4e3;2.2 日志…

IIS解析漏洞~ IIS7.漏洞分析

IIS解析漏洞 文件解析漏洞是由于中间件错误的将特殊格式的文件解析成可执行网页文件(脚本)&#xff0c;配合文件上传漏洞进行GetShell的漏洞&#xff01; 1.2&#xff1a;IIS7.X 在IIS7.0和IIS7.5版本下也存在解析漏洞&#xff0c;在默认Fast-CGI开启状况下&#xff0c;在一个文…

DM集群的高可用的配置方式(多语言)

一、介绍 强调以下&#xff1a;dm_svc.conf必须放置到应用服务器上才行&#xff0c;放到其他服务器上识别不到。 文章中有的框架可能没写到并不代表不支持&#xff0c;有没提到的可文章下方留言。 1.dm_svc.conf的作用&#xff1a; dm_svc.conf文件主要是为了当DM数据库集群…

PHP健身微信小程序系统源码

&#x1f3cb;️‍♀️健身新潮流&#xff01;解锁“健身微信小程序”的全方位塑形秘籍 &#x1f4f1;开篇&#xff1a;掌中健身房&#xff0c;随时随地动起来 你还在为找不到合适的健身场地或教练而烦恼吗&#xff1f;是时候告别这些束缚&#xff0c;拥抱“健身微信小程序”…

如何在数据埋点中发现和修复数据上报逻辑错误

如何发现和处理数据埋点中的逻辑错误 在大数据分析中,数据埋点是至关重要的一环。然而,当我们遇到数据上报逻辑错误时,该如何应对呢?本文将为你揭示解决这一棘手问题的有效方法。 目录 如何发现和处理数据埋点中的逻辑错误什么是数据上报逻辑错误?如何发现数据上报逻辑错误…

S32G3系列芯片Serial Boot功能详解!

《S32G3系列芯片——Boot详解》系列——S32G3系列芯片Serial Boot功能详解&#xff01;★★★ 一、Serial Boot模式概述二、串行下载协议2.1 基于UART和CAN的下载协议概述2.2 基于FlexCAN的Serial Boot2.2.1 IO配置2.2.2 时钟配置2.2.3 通信波特率2.2.4 基于FlexCAN的Serial Bo…

定义和使用自己的子程序——函数的介绍

定义和使用自己的子程序——函数的介绍 1.函数基础语法1.1.基础语法1.2.例题1——距离函数题目描述输入格式输出格式输入输出样例输入 #1输出 #1 提示 2.void类型3.变量作用域和参数传递3.1.局部变量和全局变量3.2.形式参数和实际参数3.3.例题2——歌唱比赛题目描述输入格式输出…