咨询电话:
15628812133
12
2023/08

层级选择器之关键词搜索功能

发布时间:2023-08-12 18:36:38
发布者:MaiMai
浏览量:
0

上一章我们已经全部完成了层级选择器的实现。除此之外我们还想增加一个关键词搜索功能。

在此之前我们需要先完成二级选择器的显示与隐藏。


通过v-show来控制二级选择器的显示与隐藏。

v-show

当点击按钮时,在方法里改变item.isShow的值即可。

示例图

DOM结构

方法

若后台数据中没有提供isShow这样的字段,则需要在请求接口的时候本地初始化。

本地初始化

接下来需要实现关键词搜索功能。利用filter函数,当包含关键词的时候就返回这条数据。如图所示:

filter筛选


记得将isShow字段设置为true。

现在就能够实现关键词搜索的效果了。

最终效果



返回列表