当前位置: 首页 > 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;并…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...