如何将Vue树形组件封装实现长尾词搜索功能？

本文共计1099个文字，预计阅读时间需要5分钟。

我使用的框架是vue2 + antd，但是antd的tree组件中没有提供封装好的搜索功能，官方提供的搜索功能封装也不是很好，而且限制比较多。因为我的树形结构需要默认展开，官方代码又是响应式的，所以需要做一些调整。

我使用的是 vue2 + antd， 那么 antd 的 tree 组件中没有给我们封装搜索，其官网提供的搜索也不是封装好的，而且限制比较大，因为我的树形进来要默认展开，官方的代码是进行了响应式，就不能上来就全部展开了

可以看一下，官方的代码是这样的，灵活性很低的还是

那我们自己来根据这个思路，进行一下改装， 首先看一下最终呈现是啥样的：

如上图，可以看到我们刚进来的时候，就默认是全部展开的，然后上面有一个搜索框，这里我们可以自己定义交互，可以绑定成搜索的回车事件，也可以绑定change事件, 思路就是当我们搜索以后，重置我们下面 tree 树形的 输入数据 data，这样就简单的实现了搜索以后显示指定的树形。