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

树组件 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);}

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

相关文章:

树组件 el-tree 数据回显

树组件 el-tree 数据回显 树型结构的数据回显问题&#xff1a; 这里我只放了核心代码&#xff0c;主要是如何获取选中的树节点的id集合和如何根据树节点的id集合回显数据 大家根据需要自行更改&#xff01; <el-tree ref"authorityRef" node-key"id" …...

54、PHP 实现希尔排序

题目&#xff1a; PHP 实现希尔排序 描述&#xff1a; 思路分析&#xff1a;希尔排序是基于插入排序的&#xff0c;区别在于插入排序是相邻的一个个比较&#xff08;类似于希尔中h1的情形&#xff09;&#xff0c;而希尔排序是距离h的比较和替换。 希尔排序中一个常数因子n&a…...

linux 虚拟机解压arm-linux-gcc-4.6.4-arm-x86_64.tar.bz2并arm-linux-gcc

解压到当前目录&#xff1a;tar -jxvf arm-linux-gcc-4.6.4-arm-x86_64.tar.bz2解压到指定目录&#xff1a;tar -jxvf arm-linux-gcc-4.6.4-arm-x86_64.tar.bz2 -C /xx/xxx/xxx-C大写&#xff0c;后面接要解压的路径解压后得到一个 opt文件夹 在/usr/local/bin 下创建新的…...

泛化的最近点迭代法(Generalized-ICP)

Generalized-ICP算法是由斯坦福大学的Aleksandr V. Segal、Dirk Haehnel和Sebastian Thrun提出的&#xff0c;于2009年在Robotics science and system会议上发表。 GICP是一种ICP算法的变体&#xff0c;其原理与ICP算法相同&#xff0c;之所以称为泛化的ICP算法是因为大多数ICP…...

Java | Leetcode Java题解之第313题超级丑数

题目&#xff1a; 题解&#xff1a; class Solution {public int nthSuperUglyNumber(int n, int[] primes) {int[] dp new int[n 1];int m primes.length;int[] pointers new int[m];int[] nums new int[m];Arrays.fill(nums, 1);for (int i 1; i < n; i) {int minN…...

单细胞数据整合-去除批次效应harmony和CCA (学习)

目录 单细胞批次效应学习 定义 理解 常用的去批次方法-基于Seurat 1&#xff09; Seurat-integration&#xff08;CCA&#xff09; 2&#xff09; Seurat-harmony 去批次代码 ①Seurat-integration&#xff08;CCA&#xff09; ②Seurat-harmony 单细胞批次效应学习 …...

MuRF代码阅读

对图像Size的处理, 以适应Transformer 在MVSPlat 当中使用 Center_Crop 裁剪图像&#xff0c;适用于 Transformer 的32 倍数&#xff0c; 其中 焦距 f 不变化&#xff0c;只改变 cx,cy.MuRF 直接对图像进行 插值&#xff0c;合成理想的 size. 根据 ori_size 和 inference_size…...

pycharm无法导入pyside2模块;“ModuleNotFoundError: No module named ‘PySide2“

参考博客&#xff1a; 1&#xff09;pycharm中配置pyqt designer和pyside2【功能是在pycharm中可以打开designer,并且可以把.ui文件转换为.py文件】 https://blog.csdn.net/kuntliu/article/details/117219237 2&#xff09;.ui转化为.py后&#xff0c;点击运行&#xff0c;报错…...

c语言指针中“数组名的理解”以及“一维数组传参”的本质

数组名的理解 数组名就是数组首元素的地址。 例如&#xff1a;输入一个数组的所有元素&#xff0c;再打印出来。 另一种写法 以上可以看出&#xff1a;*arri&#xff09; arr[i] 也即是&#xff1a;*(iarr)i[arr] 本质上无区别 1&#xff1a;数组就是数组&#xff0c;是一块…...

计算机毕业设计Python+Flask微博舆情分析 微博情感分析 微博爬虫 微博大数据 舆情监控系统 大数据毕业设计 NLP文本分类 机器学习 深度学习 AI

基于Python/flask的微博舆情数据分析可视化系统 python爬虫数据分析可视化项目 编程语言&#xff1a;python 涉及技术&#xff1a;flask mysql echarts SnowNlP情感分析 文本分析 系统设计的功能&#xff1a; ①用户注册登录 ②微博数据描述性统计、热词统计、舆情统计 ③微博数…...

KubeBlocks v0.9 解读|最高可管理 10K 实例的 InstanceSet 是什么?

实例&#xff08;Instance&#xff09;是 KubeBlocks 中的基本单元&#xff0c;它由一个 Pod 和若干其它辅助对象组成。为了容易理解&#xff0c;你可以先把它简化为一个 Pod&#xff0c;下文中将统一使用实例这个名字。 InstanceSet 是一个通用 Workload API&#xff0c;负责…...

ZW3D二次开发_菜单_禁用/启用表单按钮

1.如图示&#xff0c;ZW3D可以禁用表单按钮&#xff08;按钮显示灰色&#xff09; 2.禁用系统默认表单按钮&#xff0c;可以在菜单空白处右击&#xff0c;点击自定义&#xff0c;找到相关按钮的名称&#xff0c;如下图。 然后使用代码&#xff1a; char name[] "!FtAllBo…...

windows子系统wsl完成本地化设置locale,LC_ALL

在 Windows 的子系统 Linux&#xff08;WSL&#xff09;环境中&#xff0c;解决本地化设置问题可以采取以下步骤&#xff1a; 1. **检查本地化设置**&#xff1a; 打开你的 WSL 终端&#xff08;比如 Ubuntu、Debian 等&#xff09;&#xff0c;运行以下命令来查看当前的本…...

MYSQL 根据条件order by 动态排序

文章目录 案例1&#xff1a;根据动态值的不同&#xff0c;决定某个字段是升序还是降序案例2&#xff1a;根据动态值的不同&#xff0c;决定使用哪个字段排序 最近在做大数据报表时&#xff0c;遇到这样一种情况&#xff0c;若是A类型&#xff0c;则部门按照正序排序&#xff1b…...

DirectX修复工具下载安装指南:电脑dll修复拿下!6种dll缺失修复方法!

在日常使用电脑的过程中&#xff0c;不少用户可能会遇到“DLL文件缺失”的错误提示&#xff0c;这类问题往往导致程序无法正常运行或系统出现不稳定现象。幸运的是&#xff0c;DirectX修复工具作为一款功能强大的系统维护软件&#xff0c;能够有效解决大多数DLL文件缺失问题&am…...

vue3(1)虚拟数字键盘的封装,(2)以及子组件改变父组件变量的值进而使子组件实时响应值的变化,(3)子组件调用父组件中的方法(带参)

父组件 <template><div><!-- 数字键盘 --><NumericKeyboardv-model:myDialogFormVisible"myDialogFormVisible" :myValueRange"myValueRange"submit"numericKeyboardSubmitData"/></div> </template><s…...

反序列化靶机serial

1.创建虚拟机 2.渗透测试过程 探测主机存活&#xff08;目标主机IP地址&#xff09; 使用nmap探测主机存活或者使用Kali里的netdicover进行探测 -PS/-PA/-PU/-PY:这些参数即可以探测主机存活&#xff0c;也可以同时进行端口扫描。&#xff08;例如&#xff1a;-PS&#xff0…...

扎克伯格说Meta训练Llama 4所需的计算能力是Llama 3的10倍

Meta 公司开发了最大的基础开源大型语言模型之一 Llama&#xff0c;该公司认为未来将需要更强的计算能力来训练模型。马克-扎克伯格&#xff08;Mark Zuckerberg&#xff09;在本周二的 Meta 第二季度财报电话会议上表示&#xff0c;为了训练 Llama 4&#xff0c;公司需要比训练…...

CTFHUB-文件上传-双写绕过

开启题目 1.php内容&#xff1a; <?php eval($_POST[cmd]);?> 上传一句话木马 1.php&#xff0c;抓包&#xff0c;双写 php 然后放包&#xff0c;上传成功 蚁剑连接 在“/var/www/html/flag_484225427.php”找到了 flag...

RabbitMQ docker部署,并启用MQTT协议

在Docker中部署RabbitMQ容器并启用MQTT插件的步骤如下&#xff1a; 一、准备工作 安装Docker&#xff1a; 确保系统上已安装Docker。Docker是一个开源的容器化平台&#xff0c;允许以容器的方式运行应用程序。可以在Docker官方网站上找到适合操作系统的安装包&#xff0c;并…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...