el-select的filter-method/remote-method都是每輸入一個字都會進行遠程請求,但是現(xiàn)有的選項數(shù)據(jù)量很大(10w+)僵蛛,所以每次都請求不是很現(xiàn)實是吧
1、方案一:
產(chǎn)品想在el-select組件外面放一個搜索按鈕迎变,但是點擊區(qū)域外會失去焦點充尉,選項會消失,所以很不現(xiàn)實衣形,體驗非常不好
2驼侠、方案二:
點擊enter的時候進行搜索,
1谆吴、如何獲取用戶輸入的關(guān)鍵字呢倒源?
看下是用戶目前輸入的值,但是value綁定的是用戶從下拉框里選取的值
所以如何獲取呢句狼?
其實我們可以從filter-method/remote-method中獲取笋熬,這倆方法都可以他的形參就是這個輸入值。
想到這是不是已經(jīng)很明了了呢腻菇,有關(guān)鍵字胳螟,也能監(jiān)聽到enter事件,el-select綁定keydown事件
@keydown.enter.native="selAccountNameOpts"
這樣也是很完美的解決了
(but產(chǎn)品突發(fā)奇想說要按下space的時候進行搜索筹吐,他說這是用戶的習慣糖耸,雖然我是研發(fā),但是我的習慣是enter搜索丘薛,沒關(guān)系來space搜索吧)
3蔬捷、方案二:
第一:space是可以被輸入的input框里的,所以要阻止默認事件
@keydown.space.native.prevent="selAccountNameOpts"
注意哦榔袋,keyup是阻止不了空格鍵入的哈,因為這個時候已經(jīng)輸入上去啦~~~
last:祝福每一位研發(fā)小伙伴都能和PM溝通順利~