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.mzph.cn/news/608247.shtml

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

相关文章

MIT_线性代数笔记:第 25 讲 对称矩阵和正定性

目录 对称矩阵 Symmetric matrices实特征值 Real eigenvalues正定矩阵 Positive definite matrices 对称矩阵是最重要的矩阵之一,其特征值为实数并且拥有一套正交特征向量。正定矩阵的性质则更好。 对称矩阵 Symmetric matrices 包含特殊性质的矩阵,例如…

Probabilistic Forecasting with Temporal Convolutional Neural Network

Abstract 我们提出了一种基于卷积神经网络(CNN)的概率预测框架,用于多个相关时间序列预测。该框架可用于估计参数和非参数设置下的概率密度。更具体地说,构建基于扩张因果卷积网络的堆叠残差块来捕获序列的时间依赖性。与表示学习…

Certum与Geotrust的SSL证书区别

Certum和GeoTrust都是知名的CA认证机构,这两个品牌下的SSL证书在多个方面存在一些差异。今天就随SSL盾小编了解Certum与Geotrust证书的区别。 一、Certum机构背景 Certum是波兰的一家CA认证机构,成立于2002年,至今已有近20多年的历史。旗下有…

LeetCode-棒球比赛(682)

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

基于ZU19EG的100G-UDP解决方案

概述 本文档介绍ZU19EG与Mellanox CX6 100G网卡通信解决方案。 环境配置 FPGA硬件:519-ZU19EG的4路100G光纤PCIe加上计算卡 电脑:国产国鑫主板(双PCU):Gooxi G2DA-B CPU:Intel Xeon Silver 2.2GHz 内存&#xff1…

Asp .Net Web应用程序(.Net Framework4.8)网站发布到IIS

开启IIS 如果已开启跳过这步 打开控制面板-程序 打开IIS 发布Web程序(.Net Framework 4.8 web网页) 进入IIS管理器新建一个应用池 新建一个网站 网站创建完毕 为文件夹添加访问权限 如果不添加访问权限,运行时将会得到如下错误 设置权限 勾…

kubernetes ResourceQuotas Limits(资源配额)

开头语 写在前面:如有问题,以你为准, 目前24年应届生,各位大佬轻喷,部分资料与图片来自网络 内容较长,页面右上角目录方便跳转 简介 当多个用户或团队共享具有固定节点数目的集群时,人们会…

使用串口 DMA 模式接收不定长数据

一、简介 曾经遇到客户有一个需求,需要用串口 DMA 的方式接收不定长度的数据,DMA 有个缺点就是在每次传输前需要设定好传输的字节长度,这种方式显然对于接收不定长度的数据来说没有那么灵活。但 DMA 也有着显著的优点,如可直接访…

JS新手入门笔记整理:对象

对象可以分为两种:一种是“自定义对象”,另外一种是“内置对象”。自定义对象,指的是需要我们自己定义的对象。内置对象,指的是不需要我们自己定义的(即系统已经定义好的)、可以直接使用的对象。在JavaScri…

abp vnext 下载指定版本的项目

开发环境 Win11 vs2022 abp vnext 下载地址:Get Started | ABP.IO 下载abp框架之前,需要先安装CLI,打开命令提示符,执行以下命令即可,这个也可以指定版本下载,这里就不做介绍了,以及删除命令…

【MySQL】数据库之Redis的持久化

目录 一、Redis的高可用 1.1什么是高可用 1.2Redis的高可用技术 1.3持久化功能 1.4Redis持久化的方式 二、Redis的持久化之RDB 2.1RDB持久化的触发方式 触发条件 RDB持久化的触发分为手动触发和自动触发两种。 (1)手动触发 (2&…

‘pip‘ 不是内部或外部命令、ImportError: cannot import name ‘SCHEME_KEYS‘

错误一:启动程序中出现致命错误:无法使用“f:\pythonv\scripts\python.exe” G:\pythonv\scripts\ pip.exe” 错误二:‘pip‘ 不是内部或外部命令,也不是可运行的程序或批处理文件。 错误三:ImportError: cannot import name SCH…

九、分布式锁 —— 超详细操作演示!!!

九、分布式锁 —— 超详细操作演示! 九、分布式锁9.1 分布式锁的工作原理9.2 问题引入9.2.1 场景9.2.2 实现9.2.3 分析 9.3 setnx 实现方式9.3.1 原理9.3.2 实现9.3.3 问题 9.4 为锁添加过期时间9.4.1 原理9.4.2 实现9.4.3 问题 9.5 为锁添加标识9.5.1 原理9.5.2 实…

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

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

Excel5:自动化周报的制作

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

python实现目录和文件管理

目录 一:模块介绍: 二:目录创建 三:目录删除 四:目录复制 五:目录移动 六:文件创建 七:文件删除 八:文件读取 一:模块介绍: Python的os和…

基于 Python 构建网页版年终海报模板

文章目录 前言创建 Flask 应用定义 Flask 路由主题HTML模板静态文件存放用户选择与海报生成优势和未来扩展 前言 在创建一个网页版年终海报模板的过程中,我们将使用 Python 的 Flask 作为后端 Web 框架,Jinja2 作为模板引擎,以及 HTML、CSS …

连接两个路由器的有线连法,关键时候可能会发挥不小的作用

路由器网桥连接两个或多个路由器,以扩展网络范围,提供额外的以太网端口和无线接入点。但在开始之前,你必须首先决定如何使用每个路由器。因此,你需要知道你想要实现什么,并清楚地了解你对每台设备的期望。 例如你想扩…

Javaweb之Mybatis的动态SQL的详细解析

3. Mybatis动态SQL 3.1 什么是动态SQL 在页面原型中,列表上方的条件是动态的,是可以不传递的,也可以只传递其中的1个或者2个或者全部。 而在我们刚才编写的SQL语句中,我们会看到,我们将三个条件直接写死了。 如果页面…

你的策略盈利能力怎么样?谈谈伦敦金的回测交易

建立了一个交易系统后,投资者如何测试其有效性呢?有的人会提出让投资者尝试着在实盘或者模拟交易中应用,这个方法是好,但花费的时间较长。有人会就建议,让投资者去做回测。回测是指投资者选定一段历史行情之后&#xf…