树组件 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 数据回显 树型结构的数据回显问题: 这里我只放了核心代码,主要是如何获取选中的树节点的id集合和如何根据树节点的id集合回显数据 大家根据需要自行更改! <el-tree ref"authorityRef" node-key"id" …...
54、PHP 实现希尔排序
题目: PHP 实现希尔排序 描述: 思路分析:希尔排序是基于插入排序的,区别在于插入排序是相邻的一个个比较(类似于希尔中h1的情形),而希尔排序是距离h的比较和替换。 希尔排序中一个常数因子n&a…...
linux 虚拟机解压arm-linux-gcc-4.6.4-arm-x86_64.tar.bz2并arm-linux-gcc
解压到当前目录:tar -jxvf arm-linux-gcc-4.6.4-arm-x86_64.tar.bz2解压到指定目录:tar -jxvf arm-linux-gcc-4.6.4-arm-x86_64.tar.bz2 -C /xx/xxx/xxx-C大写,后面接要解压的路径解压后得到一个 opt文件夹 在/usr/local/bin 下创建新的…...

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

Java | Leetcode Java题解之第313题超级丑数
题目: 题解: 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) Seurat-integration(CCA) 2) Seurat-harmony 去批次代码 ①Seurat-integration(CCA) ②Seurat-harmony 单细胞批次效应学习 …...

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

pycharm无法导入pyside2模块;“ModuleNotFoundError: No module named ‘PySide2“
参考博客: 1)pycharm中配置pyqt designer和pyside2【功能是在pycharm中可以打开designer,并且可以把.ui文件转换为.py文件】 https://blog.csdn.net/kuntliu/article/details/117219237 2).ui转化为.py后,点击运行,报错…...

c语言指针中“数组名的理解”以及“一维数组传参”的本质
数组名的理解 数组名就是数组首元素的地址。 例如:输入一个数组的所有元素,再打印出来。 另一种写法 以上可以看出:*arri) arr[i] 也即是:*(iarr)i[arr] 本质上无区别 1:数组就是数组,是一块…...

计算机毕业设计Python+Flask微博舆情分析 微博情感分析 微博爬虫 微博大数据 舆情监控系统 大数据毕业设计 NLP文本分类 机器学习 深度学习 AI
基于Python/flask的微博舆情数据分析可视化系统 python爬虫数据分析可视化项目 编程语言:python 涉及技术:flask mysql echarts SnowNlP情感分析 文本分析 系统设计的功能: ①用户注册登录 ②微博数据描述性统计、热词统计、舆情统计 ③微博数…...

KubeBlocks v0.9 解读|最高可管理 10K 实例的 InstanceSet 是什么?
实例(Instance)是 KubeBlocks 中的基本单元,它由一个 Pod 和若干其它辅助对象组成。为了容易理解,你可以先把它简化为一个 Pod,下文中将统一使用实例这个名字。 InstanceSet 是一个通用 Workload API,负责…...

ZW3D二次开发_菜单_禁用/启用表单按钮
1.如图示,ZW3D可以禁用表单按钮(按钮显示灰色) 2.禁用系统默认表单按钮,可以在菜单空白处右击,点击自定义,找到相关按钮的名称,如下图。 然后使用代码: char name[] "!FtAllBo…...

windows子系统wsl完成本地化设置locale,LC_ALL
在 Windows 的子系统 Linux(WSL)环境中,解决本地化设置问题可以采取以下步骤: 1. **检查本地化设置**: 打开你的 WSL 终端(比如 Ubuntu、Debian 等),运行以下命令来查看当前的本…...
MYSQL 根据条件order by 动态排序
文章目录 案例1:根据动态值的不同,决定某个字段是升序还是降序案例2:根据动态值的不同,决定使用哪个字段排序 最近在做大数据报表时,遇到这样一种情况,若是A类型,则部门按照正序排序;…...

DirectX修复工具下载安装指南:电脑dll修复拿下!6种dll缺失修复方法!
在日常使用电脑的过程中,不少用户可能会遇到“DLL文件缺失”的错误提示,这类问题往往导致程序无法正常运行或系统出现不稳定现象。幸运的是,DirectX修复工具作为一款功能强大的系统维护软件,能够有效解决大多数DLL文件缺失问题&am…...
vue3(1)虚拟数字键盘的封装,(2)以及子组件改变父组件变量的值进而使子组件实时响应值的变化,(3)子组件调用父组件中的方法(带参)
父组件 <template><div><!-- 数字键盘 --><NumericKeyboardv-model:myDialogFormVisible"myDialogFormVisible" :myValueRange"myValueRange"submit"numericKeyboardSubmitData"/></div> </template><s…...

反序列化靶机serial
1.创建虚拟机 2.渗透测试过程 探测主机存活(目标主机IP地址) 使用nmap探测主机存活或者使用Kali里的netdicover进行探测 -PS/-PA/-PU/-PY:这些参数即可以探测主机存活,也可以同时进行端口扫描。(例如:-PS࿰…...

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

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

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

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

docker详细操作--未完待续
docker介绍 docker官网: Docker:加速容器应用程序开发 harbor官网:Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台,用于将应用程序及其依赖项(如库、运行时环…...

通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...
条件运算符
C中的三目运算符(也称条件运算符,英文:ternary operator)是一种简洁的条件选择语句,语法如下: 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true,则整个表达式的结果为“表达式1”…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log,共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题,不能使用ELK只能使用…...

STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
Spring Boot面试题精选汇总
🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

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

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

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败,具体原因是客户端发送了密码认证请求,但Redis服务器未设置密码 1.为Redis设置密码(匹配客户端配置) 步骤: 1).修…...