久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

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)鍵詞:
返回列表