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

news2024/9/28 15:22:00
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;
    }
  };

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

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

相关文章

2024年甘肃省职业院校技能大赛信息安全管理与评估 样题二 模块二

竞赛需要完成三个阶段的任务,分别完成三个模块,总分共计 1000分。三个模块内容和分值分别是: 1.第一阶段:模块一 网络平台搭建与设备安全防护(180 分钟,300 分)。 2.第二阶段:模块二…

数据结构排序——详细讲解归并排序(c语言实现递归及非递归)

上次是快排和冒泡:数据结构排序——详解快排及其优化和冒泡排序(c语言实现、附有图片与动图示意) 今天为大家带来归并排序 文章目录 1.基本思想2.递归实现3.非递归实现 1.基本思想 归并排序是一种分治算法,它将序列分成两个子序列&#xff0…

Docker与微服务实战(高级篇)- 【上】

Docker与微服务实战(高级篇)- 【上】 一、Docker复杂安装详说1.1 Mysql主从复制--原理-【尚硅谷Mysql高级篇】1.2 Mysql主从复制--【一主一从】搭建步骤1.2.1新建--【主服务器】--容器实例--33071.2.2.进入/app/mysql-master/conf目录下新建my.cnf1.2.3.…

3d建模软件有哪些?3d云渲染推荐

3D建模软件有很多,有的非常复杂难以上手,那么适合新手的有哪些呢?一起来看看吧。 1、SketchUp SketchUp是一个用户友好且直观的建模软件,能与V-Ray渲染器一起使用,适合初学者。2、Blender Blender是一个功能强大且免费…

超声波清洗机可以洗些什么东西?质量比较好的超声波清洗机推荐

超声波清洗机只能清洗眼镜吗?不是的!超声波清洗机能够清洗的物品远比我们想象的还多,最常见的还是清洗眼镜,毕竟超声波清洗机最常见就是在眼镜店了,很多朋友都喜欢定期都眼镜店里来清洗一下眼镜,这个习惯其…

录屏怎么打开?看这里,录制视频不费事!

随着科技的快速发展,录屏已经成为人们日常生活中经常使用的功能。无论是录制游戏视频、教程讲解,还是录制在线会议,录屏软件都发挥着重要作用。然而,很多用户并不知道录屏怎么打开,以及如何使用它们。本文将介绍两种常…

爬虫实战丨基于requests爬取比特币信息并绘制价格走势图

文章目录 写在前面实验环境实验描述实验内容 写在后面 写在前面 本期内容:基于requests爬取比特币信息并绘制价格走势图 下载地址:https://download.csdn.net/download/m0_68111267/88734451 实验环境 anaconda丨pycharmpython3.11.4requests 安装r…

多级缓存架构(三)OpenResty Lua缓存

文章目录 一、nginx服务二、OpenResty服务1. 服务块定义2. 配置修改3. Lua程序编写4. 总结 三、运行四、测试五、高可用集群1. openresty2. tomcat 通过本文章,可以完成多级缓存架构中的Lua缓存。 一、nginx服务 在docker/docker-compose.yml中添加nginx服务块。…

canvasdrawer 微信原生小程序生成海报图片

在小程序中生成海报是一种非常有效的推广方式 用户可以使用小程序的过程中生成小程序海报并分享给他人 通过海报的形式,用户可以直观地了解产品或服务的特点和优势 常见绘制海报方式 目前,小程序海报有两种常见的实现方式: canvas 绘制…

Python基础语法汇总【保姆级小白教程】

文章目录 一:Python基础概念1.认识Python:2.Python的优势:3.Python的应用领域:4.Python的执行方式:5.文档: 二:变量与数据类型1.变量:2.id()函数:3.注释:4.基…

SqlAlchemy使用教程(一) 原理与环境搭建

一、SqlAlchemy 原理及环境搭建 SqlAlchemy是1个支持连接各种不同数据库的Python库,提供DBAPI与ORM(object relation mapper)两种方式使用数据库。 DBAPI方式,即使用SQL方式访问数据库 ORM, 对象关系模型,是用 Python…

竞赛保研 基于深度学习的视频多目标跟踪实现

文章目录 1 前言2 先上成果3 多目标跟踪的两种方法3.1 方法13.2 方法2 4 Tracking By Detecting的跟踪过程4.1 存在的问题4.2 基于轨迹预测的跟踪方式 5 训练代码6 最后 1 前言 🔥 优质竞赛项目系列,今天要分享的是 基于深度学习的视频多目标跟踪实现 …

Trans论文复现:基于数据驱动的新能源充电站两阶段规划方法程序代码!

适用平台:MatlabYalmipCplex/Gurobi; 文章提出了一种电动汽车充电站的两阶段规划方法,第一阶段通过蒙特卡洛法模拟充电车辆需求和电池充放电数据来确定充电站位置;第二阶段通过数据驱动的分布鲁棒优化方法优化充电站的新能源和电池…

Jenkins配置发邮件

Jenkins配置发邮件 账号设置 首先这个邮箱账号要支持发邮件,QQ邮箱开通SMTP即可之后要认证 企业微信邮箱 开启IMAP/SMTP服务开启POP/SMTP服务 无论是企业微信邮箱还是QQ邮箱都是SSL协议,在下面的配置中我都会勾选上!!&#xff0…

Nginx配置jks格式证书,升级https

通常在给服务器升级https,需要在nginx上配置域名对应的https证书,nginx通常配置的是crt和key格式的证书。最近遇到有人提供了jks格式的证书,查阅了几个资料都是需要先将jks转为p12格式,然后再将p12转为crt格式。这里记录一下相关过…

【自控实验】3. 带有饱和非线性环节控制系统相平面分析

本科课程实验报告,有太多公式和图片了,干脆直接转成图片了 仅分享和记录,不保证全对 实验内容: 有无非线性环节的相轨迹对比,并求超调量。 在输入单位阶跃信号Xsr时,用示波器观察和记录系统输入饱和非线…

复选框QCheckBox和分组框QGroupBox

1. 复选框:QCheckBox 实例化 //实例化 // QCheckBox* checkBox new QCheckBox("是否同意该条款",this);QCheckBox* checkBox new QCheckBox(this);1.1 代码实现 1.1.1 复选框的基本函数 复选框选中状态的参数 Qt::Unchecked //未选中状态 Qt::Part…

Java字符串拼接常用方法总结

使用场景:用某个分隔符拼接字符串 下边是我使用过的几种方式废话不多说,直接上代码初始数据 1.使用流2.StringBuilder3.[StringJoiner](https://blog.csdn.net/qq_43417581/article/details/126076152?ops_request_misc%257B%2522request%255Fid%2522%2…

win11下载Hbuliderx 安装闪退解决教程+安装包分享

在官网下载 目录 在官网下载 出现闪退 下载失败 2.2. 最终在百度网盘里下载了历史版本 2.3. 然后解压文件 2.4. 双击打开 2.5. 安装成功 出现闪退 下载失败 结果下载失败,一下子弹出的下载框就会闪退 2.2. 最终在百度网盘里下载了历史版本 下载的网盘链接: …

搭建个人智能家居 2 -安装ESPHome

搭建个人智能家居 2 -安装ESPHome 前言ESPHome Linux平台windows平台总结 前言 上一篇文章我们演示了多个平台下面搭建HomeAssistant,可能有一些小伙伴在安装、运行HomeAssistant OS后,打开HomeAssistant的控制台时会出现下面图片显示的问题 这一般是本…