前言

最近项目中有一个Tree组件需要再优化的方案，原来的tree仅仅只是展示所有数据，再加上可以选择，然后将选中的信息传给后端，产品觉得数据太多了，一个个找起来很麻烦，希望可以加一下搜索功能，我说这个可能不太好弄，但是我尽量试一下吧。

添加搜索功能的话，antd官网就有例子，可以仿照写一下：antd 4.x Tree包含搜索功能。

辛辛苦苦拷贝了2分钟的代码，测试一下功能没问题，过了两小时截图把搜索到的数据展示给产品看一下：

结果产品给我说这样还不够，我要的是只展示我所搜索的内容，其他的内容都给过滤掉，删除掉，只保留搜索内容的父子级内容。大意是这样：

我说这个有点不太好处理啊，这样不也挺好的吗，然后反手把甲方爸爸抬了出来，甲方是这样要求的，我也没办法。emmm...这样的话那给我点时间。看了眼官网没有例子，有一个API：filterTreeNode，不知道为什么没有生效，最后只能自己琢磨一下。

思路

我们要做的就是匹配搜索的值和title去匹配，如果匹配不上的就删掉，这里去打印观察title的值会有很多层，需要一级一级去匹配，先看一下我这边的写法，利用双重for循环首先判断子对象是否匹配到搜索的值，如果没有，则挨个删除，再去判断外层的上一层的children是否为空，如果为空也要删除，反之则保留。

  const filterFunc = (data: any) => {
    for (let i = 0; i < data.length; i++) {
      if (!searchValue) {
        return data[i]
      } else {
        for (let j = 0; j < data[i].children?.length; j++) {
          const strTitle = (data[i].children[j].title.props.children[1].props?.children === searchValue)
          if (!strTitle) {
            data[i].children.splice(j, 1)
            j--
          }
        }
      }
      if (!data[i].children?.length) {
        data.splice(i, 1)
        i--
      }
    }
  }
  filterFunc(treeData)

该方法目前解决项目中的问题，因为没有第三级数据，所以双重for循环处理是ok的，但是如果有第三级数据，这个方法就有问题，后续我还会继续琢磨，当然如果大家有更好的方法，欢迎评论区留言。

关于React-Antd-Tree添加搜索功能的进一步优化

前言

思路