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;
    }
  };

相关推荐

  1. vue2 el-tree树形下拉

    2024-01-09 10:08:05       10 阅读
  2. react如何拿输入的值

    2024-01-09 10:08:05       14 阅读
  3. 前端输入简单实现检测@成员输入

    2024-01-09 10:08:05       35 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-09 10:08:05       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-09 10:08:05       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-09 10:08:05       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-09 10:08:05       20 阅读

热门阅读

  1. Flutter循环遍历数组获取索引值

    2024-01-09 10:08:05       44 阅读
  2. Spark避坑系列二(Spark Core-RDD编程)

    2024-01-09 10:08:05       47 阅读
  3. Redis启动方式

    2024-01-09 10:08:05       41 阅读
  4. 正则表达式—split()拆分

    2024-01-09 10:08:05       38 阅读
  5. 手机的恢复功能急需改进

    2024-01-09 10:08:05       41 阅读
  6. 数据结构之Radix和Trie

    2024-01-09 10:08:05       47 阅读
  7. Go语言中的秘密武器:魔力般的Map数据结构解密

    2024-01-09 10:08:05       39 阅读
  8. 小程序this.setData修改对象、数组中的值

    2024-01-09 10:08:05       40 阅读
  9. Pytorch:torch.nn.Module.apply用法详解

    2024-01-09 10:08:05       41 阅读
  10. PyTorch 中的批量规范化

    2024-01-09 10:08:05       29 阅读
  11. GPT-4:人工智能的新纪元与未来的无限可能

    2024-01-09 10:08:05       34 阅读