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.hqwc.cn/news/334575.html

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

相关文章

Golang中for和for range语句的使用技巧、对比及常见的避坑

前言 基础语法不再赘述,写这个原因是之前的某次面试被问道了,我知道会导致问题但具体答下来不是很通顺。再回想自己开发过程中,很多地方都是使用到了for/for range,但是却从没注意过一些细节,因此专门学习一下进行记录…

解决MySQL8.0本地服务器连接不上的问题

MySQL在同一个内网内,但是他人链接你的MySQL时候提示: Host xxx is not allowed to connect to this MySQL server 这通常是MySQL限制了用户允许访问的IP导致的,我们可以按照下面的步骤来接触这个限制。 办法一 进入mysql的bin目录&#xff…

Linux的网络设置

一.查看网络配置 1.查看网络接口信息 - ifconfig ① 直接使用 ifconfig 命令 默认显示活动的网卡 解析: ② ifconfig 具体网卡名称 只显示具体的网卡的信息 ③ ifconfig -a 显示所有的网卡 ④ ifconfig 网卡名称 down 关闭网卡 ifdown 关闭网卡 …

在黑马程序员大学的2023年终总结

起笔 时间真快,转眼又是年末。是时候给2023做个年终总结了,为这一年的学习、生活以及成长画上一个圆满的句号。 这一年相比去年经历了很多事情,接下来我会一一说起 全文大概4000字,可能会占用你15分钟左右的时间 经历 先来给大…

前端nginx配置指南

前端项目发布后,有些接口需要在服务器配置反向代理,资源配置gzip压缩,配置跨域允许访问等 配置文件模块概览 配置示例 反向代理 反向代理是Nginx的核心功能之一,是指客户端发送请求到代理服务器,代理服务器再将请求…

Unity 踩坑记录 AnyState 切换动画执行两次

AnySate 切换动画 Can Transition To Self 将这个勾选去掉!!!

C++ Primer 第五版 中文版 阅读笔记 + 个人思考

C Primer 第五版 中文版 阅读笔记 个人思考 第 10 章 泛型算法10.1 概述练习10.1练习10.2 第 10 章 泛型算法 泛型的体现:容器类型(包括内置数组),元素类型,元素操作方法。 顺序容器定义的操作:insert&a…

Domain Adaptation 相关介绍

1. Transfer Learning Transfer learning 是机器学习的一个分支, 而 Domain adpatation 是 transfer learning 的一个分支. 在 transfer learning 中有两个概念: source domain (源域) 和 target domain (目标域). 源域中往往有丰富的信息, 比如有大量的数据点和其真实的标签;…

基于OpenCV的图像缩放

基础概念 缩放是将图像的尺寸变小或变大的过程,即减少或增加原图像数据的像素个数,或者说通过增加或删除像素点来改变图像的尺寸; 基本原理:将分辨率(图片尺寸)为(w,h)的图像,缩放后其图像分辨…

CVE-2023-36025 Windows SmartScreen 安全功能绕过漏洞

CVE-2023-36025是微软于11月补丁日发布的安全更新中修复Windows SmartScreen安全功能绕过漏洞。攻击者可以通过诱导用户单击特制的URL来利用该漏洞,对目标系统进行攻击。成功利用该漏洞的攻击者能够绕过Windows Defender SmartScreen检查及其相关提示。该漏洞的攻击…

代码随想录算法训练营第二十八天 | 93.复原IP地址、78.子集、90.子集II

93.复原IP地址 题目链接:93.复原IP地址 有效 IP 地址 正好由四个整数(每个整数位于 0 到 255 之间组成,且不能含有前导 0),整数之间用 . 分隔。 例如:"0.1.2.201" 和 "192.168.1.1"…