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[] = [];
          //循环tree
          res.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;
    }
  };

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

求求你,别再乱用@Transactional了

求求你,别再乱用Transactional了 文章目录 🔊先看个问题📕情况1情况1结果 🖥️情况2情况2结果 📜 情况三情况3结果 📘情况4情况4结果 🔖先说结论情况1结果情况2结果情况3结果情况4结果&#x1f…

oracle 12c pdb expdp/impdp 数据导入导出

环境 (源)rac 环境 byoradbrac 系统版本:Red Hat Enterprise Linux Server release 6.5 软件版本:Oracle Database 12c Enterprise Edition Release 12.1.0.2.0 - 64bit byoradb1:172.17.38.44 byoradb2:172.17.38.45 (目的&am…

2024年中职网络安全——Windows操作系统渗透测试(Server2105)

Windows操作系统渗透测试 任务环境说明: 服务器场景:Server2105服务器场景操作系统:Windows(版本不详)(封闭靶机)需要环境加Q 目录 1.通过本地PC中渗透测试平台Kali对服务器场景进行系统服务…

区块链金融科技:技术融合与挑战应对【文末送书-16】

文章目录 前言一.区块链与金融科技的融合:革新金融格局的技术之光1.1区块链技术简介1.2 区块链在金融科技中的应用 二.智能合约2.1 去中心化金融(DeFi)2.2区块链对金融科技的影响2.3数据安全性 三.区块链与金融科技【文末送书-16】3.1 粉丝福…

spring Security源码讲解-Sevlet过滤器调用springSecurty过滤器的流程

承接上文 上一节 http://t.csdnimg.cn/ueSAl 最后讲到了过滤器收集完成注入容器,这节我们来讲Security的Filter是怎么被Spring调用的。 我们先看webSecurity的performBuild方法(), ![在这里插入图片描述](https://img-b 也就是说,最终返回的过滤器对象…

如何利用大语言模型(LLM)打造定制化的Embedding模型

一、前言 在探索大语言模型(LLM)应用的新架构时,知名投资公司 Andreessen Horowitz 提出了一个观点:向量数据库是预处理流程中系统层面上最关键的部分。它能够高效地存储、比较和检索高达数十亿个嵌入(也就是向量&…

解码 Elasticsearch 查询 DSL:利用 Elasticsearch 中的 has_child 和 has_parent 查询进行父子文档搜索

今天,让我们深入研究 has_child 查询和 has_parent 查询,这将帮助我们将 2 个不同的文档组合到一个索引中,从而使我们能够将它们与关系关联起来。 这样做会对我们搜索相关文档时有很大帮助。 在使用 has_child 及 has_parent 这种关系时&…

解决 rasa 中 slot 不能为中文的问题

解决 rasa 中 slot 不能为中文的问题 定位问题解决办法 定位问题 slots:姓名:type: textmappings:- type: custom如上的 slot 配置,在 rasa train 时会报以下错误: YamlValidationException: Failed to validate D:\project\python\rasa_test\y\domain…

Ansys Zemax | 如何使用 ZPL 创建用户自定义求解

附件下载 联系工作人员获取附件 本文使用两个示例演示了如何使用 ZPL 创建用户自定义解。第一个示例介绍了如何创建 ZPL 解以确保序列文件中像面的曲率半径等于系统的 Petzval 曲率。第二个示例介绍了如何在非序列元件编辑器 ( Non-Sequential Component Editor ) 中基于其他…

实战:使用docker容器化服务与文件挂载-2

接着上文,演示Elasticsearch 和 Kibana 的安装,并讲解文件挂载 Elasticsearch of Docker (Kibana) 1、Elasticsearch 安装 ElasticSearch 使用 Docker 安装:https://www.yuque.com/zhangshuaiyin/guli-mall/dwrp5b 1.…

C++ 实现十大排序算法

教你手撕排序,这里有一个概念就是稳定排序。假定在待排序的记录序列中,存在多个具有相同的关键字的记录,若经过排序,这些记录的相对次序保持不变,即在原序列中,r[i]r[j],且r[i]在r[j]之前&#…

vue2 +Html + css 实现房间状态图,酒店前台入住管理系统的设计与开发

一、需求分析 酒店管理系统是指一种可以提高酒店管理效率的软件或平台。其面向酒店前台工作人员和酒店管理员,界面美观大方、操作方便。系统强化以客源为中心的信息完整性、长久性、可操作性,突出以预订、房源、房价等对营销具有影响力的信息处理。 系统…

微服务-sentinel-基本案例,持久化

sentinel 功能 限流 限流文档 直接拒绝:触发阀值直接抛弃。冷启动:在一段时间内针对突发流量缓慢增长处理数量。 3)匀速器:请求以均匀的速度通过。 降级降级文档 1)RT 统计时间内,大于预设请求数量&…

Spring - 配置支持多数据源

目录 SpringBoot整合多数据源整合步骤具体整合步骤如下:1、在application.properties中配置出多个数据源2、在代码中创建出mapper目录,在mapper目录下创建出不同数据源的目录创建出目录MySQL数据源的MapperSQL Server数据源的Mapper 3、创建config packa…

数据结构实验2:队列的应用

目录 一、实验目的 二、实验原理 1.1 队列的基本操作 1.1.1 队列的定义 1.1.2 队列的初始化 1.1.3 入队操作 1.1.4 出队操作 1.1.5 检查队列是否为空 1.1.6 返回队列的长度 2.1队列的运用 三、实验内容 问题描述 代码 截图 分析 一、实验目的 1、理解并掌握队列…

Pod的亲和性和反亲和性

如何部署pod是重要的集群的调度机制,合理的配置pod调度机制可以实现资源最大化利用。 调度策略匹配标签操作符拓扑域调度目标node的亲和性主机标签In、NotIn、Exists、DoesNotExist、Gt、Lt不支持指定主机pod的亲和性pod的标签In、NotIn、Exists、DoesNotExist支持…

【DNS Server Spoofed Request Amplification DDoS漏洞修复】

文章目录 前言 之前对公司服务器做漏洞扫描,发现扫描工具提示存在这样一个漏洞,本来觉得漏洞利用率低,而且扫描百度,QQ等网站也会有此漏洞,主要是找了很久资料也不知道如何修复,所以暂未处理。但是近期由于…

基于ODBC的数据库应用(MFC)

文章目录 1.预备知识1.数据库概述1.数据库和DBMS2.结构化查询语言SQL(Structured Query Language)3.数据库方式种类1.ODBC(Open DataBase Connectivity)开放数据库连接2.DAO(Data Access Objects)数据访问对象3.OLE DB(OLE数据库) 2.MFC ODBC1.CRecordset类构造记录集属性记录集…

制作更好的待办事项清单的方法有哪些?

在忙碌的工作、学习或生活中,我们都渴望变得更加自律,希望每件事都能有目标、有计划地高效完成。而要实现这一愿望,一个精心制作的待办事项清单无疑是不可或缺的。那么,制作更好的待办事项清单的方法有哪些?高效的待办…

C++深入学习之模板

为什么需要模板 先来看下面一段程序: int add(int x, int y) {return x y; }double add(double x, double y) {return x y; }long add(long x, long y) {return x y; }string add(string x, string y) {return x y; }//T1 T2 T3 T3 add(T1 x, T2 y) {return…