树组件 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官方网站上找到适合操作系统的安装包,并…...
Python面试宝典第25题:括号生成
题目 数字n代表生成括号的对数,请设计一个函数,用于能够生成所有可能的并且有效的括号组合。 备注:1 < n < 8。 示例 1: 输入:n 3 输出:["((()))","(()())","(())()"…...
计算机毕业设计选题推荐-社区停车信息管理系统-Java/Python项目实战
✨作者主页:IT研究室✨ 个人简介:曾从事计算机专业培训教学,擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…...
Python面试整理-自动化运维
在Python中,自动化运维是一个重要的应用领域。Python凭借其简单易用的语法和强大的库支持,成为了运维工程师的首选工具。以下是一些常见的自动化运维任务以及如何使用Python来实现这些任务: 1. 文件和目录操作 Python的os和shutil模块提供了丰富的文件和目录操作功能。 impo…...
自动化测试与手动测试的区别!
自动化测试与手动测试之间存在显著的区别,这些区别主要体现在以下几个方面: 测试目的: 自动化测试的目的在于“验证”系统没有bug,特别是在系统处于稳定状态时,用于执行重复性的测试任务。 手工测试的目的则在于通过…...
下属“软对抗”,工作阳奉阴违怎么办?4大权谋术,让他不敢造次
下属“软对抗”,工作阳奉阴违怎么办?4大权谋术,让他不敢造次 第一个:强势管理 在企业管理中,领导必须展现足够的强势。 所谓强势的管理,并不仅仅指态度上的强硬,更重要的是在行动中坚持原则和规…...
爬猫眼电ying
免责声明:本文仅做分享... 未优化,dp简单实现 from DrissionPage import ChromiumPage import time urlhttps://www.maoyan.com/films?showType2&offset60 pageChromiumPage()page.get(url) time.sleep(2) for i in range(1,20):# 爬取的页数for iu_list in page.eles(.…...
政安晨:【Keras机器学习示例演绎】(五十七)—— 基于Transformer的推荐系统
目录 介绍 数据集 设置 准备数据 将电影评分数据转换为序列 定义元数据 创建用于训练和评估的 tf.data.Dataset 创建模型输入 输入特征编码 创建 BST 模型 开展培训和评估实验 政安晨的个人主页:政安晨 欢迎 👍点赞✍评论⭐收藏 希望政安晨的…...
15.4 zookeeper java client之Curator使用(❤❤❤❤❤)
Curator使用 1. 为什么使用Curator对比Zookeeper原生2. 集成Curator2.1 依赖引入curator-frameworkcurator-recipes2.2 `yml`配置连接信息2.3 CuratorConfig配置类2.4 Curator实现Zookeeper分布式锁业务2.4.1 业务:可重入锁和不可重入锁可重入锁和不可重入锁InterProcessMutex …...
哈默纳科HarmonicDrive谐波减速机的使用寿命计算
在机械传动系统中,减速机的应用无处不在,而HarmonicDrive哈默纳科谐波减速机以其独特的优势,如轻量、小型、传动效率高、减速范围广、精度高等特点,成为了众多领域的选择。然而,任何机械设备都有其使用寿命,…...
前后端完全分离实现登录和退出
前后端分离的整合 使用springsecurity前端项目redis完成认证授权的代码 1. 搭建一个前端工程 使用 vue ui搭建,使用webstrom操作 2. 创建一个登录页面 <template><div class"login_container"><!-- 登录盒子 --><div class"l…...
做网站优化多少钱/如何优化培训方式
项目管理工具Maven安装与配置 1.Maven简介 Maven 是 Apache 软件基金会的一个开源的项目管理工具,它用来帮助开发者管理项目中的 jar,以及 jar 之间的依赖关系、完成项目的编译、测试、打包和发布等工作。 2.Maven中的概念 2.1Pom(Project Object Model)项目对象模型 Mave…...
wordpress+刷新/怎么制作一个网页
作者:chris 来自:IBM 很多人用java进行文档操作时经常会遇到一个问题,就是如何获得word,excel,pdf等文档的内容?我研究了一下,在这里总结一下抽取word,pdf的几种方法。 1. 用jaco…...
山西做网站优势/b2b平台都有哪些网站
深度学习基础 - 积分 flyfish 考虑平方根函数f(x)xf(x) \sqrt {x}f(x)x ,其中x∈[0,1]x∈[0,1]x∈[0,1] 。在区间[0,1]上,函数f“下方”的面积是多少?问题中的“下方”面积,是指函数), yf(x)y f(x)yf(x)的图象与x…...
本校网站建设/业务多平台怎么样
B - 最少硬币问题 Description 设有n种不同面值的硬币,各硬币的面值存于数组T[1:n]中。现要用这些面值的硬币来找钱。可以使用的各种面值的硬币个数存于数组Coins[1:n]中。 对任意钱数0≤m≤20001,设计一个用最少硬币找钱m的方法。 对于给定的1≤n≤10…...
网站策划书怎么写/网址ip地址查询工具
如何能够获得Extjs.grid.panel总的Columns的列数 举报| 分享| 2015-01-01 13:56linjian001 |浏览 485 次编程语言Javascript网页设计通过什么方法能够获取这个数据 var grid Ext.create(Ext.grid.GridPanel,{}); var columns grid.columns; var Length columns.length 2015-…...
做网站建本地环境作用/seo网站推广的主要目的包括
前面说完了此项目的创建及数据模型设计的过程。如果未看过,可以到这里查看,并且项目源码已经放大到github上,可以去这里下载。代码也已经部署到sina sea上,地址为http://fengzheng.sinaapp.com/先跳过视图展示及表单处理的部分,先…...