日韩av免费一二三区-2021精品久久久久精品k8-亚洲红杏AV无码专区首页-99精品久久久久久水蜜桃

咨詢電話:
15628812133
12
2023/08

層級(jí)選擇器之關(guān)鍵詞搜索功能

發(fā)布時(shí)間:2023-08-12 18:36:38
發(fā)布者:MaiMai
瀏覽量:
0

上一章我們已經(jīng)全部完成了層級(jí)選擇器的實(shí)現(xiàn)。除此之外我們還想增加一個(gè)關(guān)鍵詞搜索功能。

在此之前我們需要先完成二級(jí)選擇器的顯示與隱藏。


通過(guò)v-show來(lái)控制二級(jí)選擇器的顯示與隱藏。

v-show

當(dāng)點(diǎn)擊按鈕時(shí),在方法里改變item.isShow的值即可。

示例圖

DOM結(jié)構(gòu)

方法

若后臺(tái)數(shù)據(jù)中沒(méi)有提供isShow這樣的字段,則需要在請(qǐng)求接口的時(shí)候本地初始化。

本地初始化

接下來(lái)需要實(shí)現(xiàn)關(guān)鍵詞搜索功能。利用filter函數(shù),當(dāng)包含關(guān)鍵詞的時(shí)候就返回這條數(shù)據(jù)。如圖所示:

filter篩選


記得將isShow字段設(shè)置為true。

現(xiàn)在就能夠?qū)崿F(xiàn)關(guān)鍵詞搜索的效果了。

最終效果



關(guān)鍵詞:
返回列表