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

xml 复制代码
input搜索框搜索树形子级内容

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


typescript 复制代码
//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;
    }
  };
相关推荐
LYFlied37 分钟前
从 Vue 到 React,再到 React Native:资深前端开发者的平滑过渡指南
vue.js·react native·react.js
AAA阿giao5 小时前
从零拆解一个 React + TypeScript 的 TodoList:模块化、数据流与工程实践
前端·react.js·ui·typescript·前端框架
hedley(●'◡'●)5 小时前
基于cesium和vue的大疆司空模仿程序
前端·javascript·vue.js·python·typescript·无人机
百锦再5 小时前
Vue高阶知识:利用 defineModel 特性开发搜索组件组合
前端·vue.js·学习·flutter·typescript·前端框架
小杨同学呀呀呀呀7 小时前
Ant Design Vue <a-timeline>时间轴组件失效解决方案
前端·javascript·vue.js·typescript·anti-design-vue
摘星编程17 小时前
React Native鸿蒙版:Image图片占位符
react native·react.js·harmonyos
VT.馒头18 小时前
【力扣】2721. 并行执行异步函数
前端·javascript·算法·leetcode·typescript
guangzan21 小时前
为博客园注入现代 UI 体验:shadcn 皮肤上线
typescript·tailwindcss·shadcn ui·tona
飞羽殇情1 天前
基于React Native鸿蒙跨平台开发构建完整电商预售系统数据模型,完成参与预售、支付尾款、商品信息展示等
react native·react.js·华为·harmonyos
摘星编程1 天前
React Native + OpenHarmony:ImageSVG图片渲染
javascript·react native·react.js