react输入框检索树形(tree)结构

input搜索框搜索树形子级内容1. input框输入搜索内容2. 获取tree结构数据3. 与tree匹配输入的内容,tree是多维数组,一级一级的对比输入的内容是否匹配,用forEach循环遍历数据,匹配不到在往下找,直到找到为null ,返回

在这里插入图片描述
在这里插入图片描述

//tree子级
const childSerch = (res: any, val: any) => {res?.map((itemChilf: { meterName: any }, index) => {if (itemChilf?.meterName === val) {dataName.push(itemChilf);return dataName;} else {itemChilf?.children?.map((itemChilf1: { meterName: any }) => {if (itemChilf1.meterName === val) {dataName.push(itemChilf);return dataName;}return childSerch(itemChilf1?.children, val);});return dataName;}});return dataName;};const fetchDeptList = async (val: any) => {try {dataName = [];//获取tree列表await getDeptTree().then((res: any) => {//判断是输入的那个值if (val?.formType.energyMediumId != undefined) {console.log(123456);let data: any[] = [];//循环treeres.forEach((element: any) => {if (element.id === val.formType.energyMediumId) {data.push(element);if (val?.formType?.meterName) {data = childSerch(element.children, val?.formType.meterName);}}});console.log(data);setTreeData(data);exKeys.push(data[0].children[0].id);setExpandedKeys(exKeys);props.onSelect(data[0].children[0]);return;} else if (val?.formType.meterName != undefined) {let data = [];data = childSerch(res, val?.formType.meterName);setTreeData(data);exKeys.push(data[0].children[0].id);setExpandedKeys(exKeys);props.onSelect(data[0].children[0]);return;}// console.log(val.formType.energyMediumId)setTreeData(res);// renderTreeNodes(res[0]);exKeys.push(res[0].children[0].id);setExpandedKeys(exKeys);props.onSelect(res[0].children[0]);});// hide();return true;} catch (error) {// hide();return false;}};

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

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

相关文章

浅谈安科瑞直流表在孟加拉某能源公司的应用

摘要:本文介绍了安科瑞直流电表在孟加拉某能源公司的应用。主要用于光伏直流柜内,配合分流器对汇流箱的输出电流电压等进行测量,并采集配电现场的开关信号,装置带有RS485接口可以把测量和采集的数据和设备状态上传。 Abstract: T…

sql:定时执行存储过程(嵌套存储过程、使用游标)

BEGINDeclare FormNo nvarchar(20) --单号Declare Type nvarchar(50) --类型Declare PickedQty float -Declare OutQty float Declare 生产量 floatDeclare 已装箱数量 float Declare 已入库数量 floatDeclare 损耗数量 float Declare 退货品出库数量 intdeclare k c…

文件夹重命名方法:文件夹名称随机数字命名,提高文件管理效率的秘诀

在数字时代,每天都会创建、接收和存储大量的文件。那如何有效地管理和查找这些文件?下面云炫文件管理器用简单的方法使用随机数字给文件夹命名。掌握方法可以快速识别和分类文件,提高工作效率。 文件夹随机数字命名前后效果图。 文件夹名称…

【Java EE初阶八】多线程案例(计时器模型)

1. java标准库的计时器 1.1 关于计时器 计时器类似闹钟,有定时的功能,其主要是到时间就会执行某一操作,即可以指定时间,去执行某一逻辑(某一代码)。 1.2 计时器的简单介绍 在java标准库中,提供…

阿里云服务器Centos安装宝塔面板

阿里云服务器Centos安装宝塔面板 1 背景1.1 aliyun1.2 Linux 2 安装步骤2.0 环境配置2.1 安装前准备2.2 宝塔安装2.3 建站 3 centos常用命令3.1 防火墙相关 1 背景 1.1 aliyun 阿里云服务器是阿里云提供的一项云计算服务,它能够帮助用户快速搭建网站、应用和服务&…

苍穹外卖Day01——总结1

总结1 1. 软件开发整体介绍1.1 软件开发流程1.2 角色分工1.3 软件环境 2. 苍穹外卖项目介绍2.1 项目介绍2.2 技术选项 3. Swagger4. 补充内容(待解决...) 1. 软件开发整体介绍 1.1 软件开发流程 1.2 角色分工 从角色分工里面就可以查看自己以后从事哪一…

寄10公斤包裹哪个快递便宜(寄快递哪个比较便宜)

如今,随着互联网的发展,越来越多的人选择网上购物,这支撑了许多物流公司不断地向前发展。所以快递行业的前景还是很光明的。现在当天寄出最晚第二天就能收到。但是快递公司那么多,每个公司的特色和收费都有差异。怎样才能选择合适…

windows通过ssh连接Liunx服务器并实现上传下载文件

连接ssh 输入:ssh空格用户名ip地址,然后按Enter 有可能出现下图提示,输入yes 回车即可 输入 password ,注意密码是不显示的,输入完,再按回车就行了 以上是端口默认22情况下ssh连接,有些公司它…

微信小程序 获取地址信息(uniapp)

参考API地址&#xff1a;微信小程序JavaScript SDK | 腾讯位置服务 <script> // 引入SDK核心类&#xff0c;js文件根据自己业务&#xff0c;位置可自行放置var QQMapWX require(../../js/uploadImg/qqmap-wx-jssdk.js);export default {data(){return{qqmapsdk:}},onL…

Linux_CentOS_7.9_Oracle11gr2配置数据库及监听服务自启动多方案实操之简易记录

前言: 作为运维保障,都无法准确预估硬件宕机的突发阶段,其生产数据实时在产出,那作为dba数据库服务以及相关Listener的其重要性、必要性就突显而出。这里拿虚拟机试验做个配置记录,便于大家学习参考。 实现方法一: 环境变量值::$ORACLE_HOME= /data/oracle/product/1…

NVIDIA Container Toolkit(NVIDIA Docker)

引言 Nvidia Docker该项目已被NVIDIA Container Toolkit取代。此存储库提供的工具已被弃用&#xff0c;并且该存储库已存档。 nvidia-docker不再支持包装器&#xff0c;并且 NVIDIA Container Toolkit 已进行扩展&#xff0c;允许用户配置 Docker 以使用 NVIDIA Container Ru…

Excel5:自动化周报的制作

自动化周报的数据引用来源于8月成交数据-纯数值表格&#xff0c;因为8月成交数据表格中部分单元格中有vlookup函数&#xff0c;且存在跨表连接。 对于跨表连接的解释和说明&#xff1f; 首先打开我们之前做好的成交数据。打开后我们可以看到这上面出现了一个安全警告&#xff0…

什么是SEO?SEO还存在吗?

曾经火热的seo&#xff0c;至今为啥很少人知道呢&#xff1f;为啥说seo是曾经的火热&#xff0c;这还得从那时百度的算法来说起了&#xff0c;曾经的百度可以通过seo优化自己的网站来获得百度爬虫的爬取&#xff0c;从而在百度获得更高的排名和权重。 现在我们打开百度随便搜索…

zabbix部署

zabbix部署 部署zabbix服务被监测主机部署zabbix-agent2 使用版本 组件版本centos7.9zabbix5.0php7.2.24MariaDB5.5.68 部署zabbix服务 关闭防火墙和selinux [rootnode ~]# systemctl status firewalld ● firewalld.service - firewalld - dynamic firewall daemonLoaded: …

LeetCode-棒球比赛(682)

题目描述&#xff1a; 你现在是一场采用特殊赛制棒球比赛的记录员。这场比赛由若干回合组成&#xff0c;过去几回合的得分可能会影响以后几回合的得分。 比赛开始时&#xff0c;记录是空白的。你会得到一个记录操作的字符串列表 ops&#xff0c;其中 ops[i] 是你需要记录的第…

C#: Label、TextBox 鼠标停留时显示提示信息

说明&#xff1a;记录在 Label、TextBox 控件上 鼠标停留时显示提示信息的方法。 1.效果图 2.具体实现步骤 1. 在Form 窗口中先创建 Label 并取名&#xff1a;KEY_label &#xff0c;或 TextBox 取名&#xff1a;KEY_textBox 2. lable控件的 tips 实现方法1 &#xff1a;代码…

18款Visual Studio实用插件(更新)

前言 俗话说的好工欲善其事必先利其器&#xff0c;安装一些Visual Studio实用插件对自己日常的开发和工作效率能够大大的提升&#xff0c;避免996从选一款好的IDE实用插件开始。以下是我认为比较实用的Visual Studio插件希望对大家有用&#xff0c;大家有更好的插件推荐可在文…

用cmd打开mysql显示拒绝访问

使用winR键输入cmd&#xff0c;打开命令行窗口提示符&#xff0c;输入net start mysql 出现&#xff1a;发生系统错误 5&#xff0c;拒绝访问 如何解决 同样的步骤&#xff0c;我们使用winR键输入cmd打开命令行提示窗口提示符&#xff0c; 按住ctrlshiftEnter键使用管理员打…

嵌入式-C语言-江科大-指针的详解与应用

文章目录 一&#xff1a;计算机存储机制二&#xff1a;定义指针三&#xff1a;指针的操作四&#xff1a;数组与指针五&#xff1a;指针的应用道友&#xff1a;最清晰的脚印&#xff0c;踩在最泥泞的道路上。 推荐视频配合我的笔记使用 [C语言] 指针的详解与应用-理论结合实践&a…

docker 部署haproxy cpu占用特别高

在部署mysql 主主高可用时&#xff0c;使用haproxy进行负载&#xff0c;在服务部使用的情况下发现服务器cpu占比高&#xff0c;负载也高&#xff0c;因此急需解决这个问题。 1.解决前现状 1.1 部署配置文件 cat > haproxy.cfg << EOF globalmaxconn 4000nbthrea…