el-select特殊按键进行远程搜索

el-select的filter-method/remote-method都是每输入一个字都会进行远程请求,但是现有的选项数据量很大(10w+),所以每次都请求不是很现实是吧

1、方案一:

产品想在el-select组件外面放一个搜索按钮,但是点击区域外会失去焦点,选项会消失,所以很不现实,体验非常不好

2、方案二:

点击enter的时候进行搜索,
1、如何获取用户输入的关键字呢?


image.png

看下是用户目前输入的值,但是value绑定的是用户从下拉框里选取的值
所以如何获取呢?
其实我们可以从filter-method/remote-method中获取,这俩方法都可以他的形参就是这个输入值。
想到这是不是已经很明了了呢,有关键字,也能监听到enter事件,el-select绑定keydown事件

@keydown.enter.native="selAccountNameOpts"

这样也是很完美的解决了
(but产品突发奇想说要按下space的时候进行搜索,他说这是用户的习惯,虽然我是研发,但是我的习惯是enter搜索,没关系来space搜索吧)

3、方案二:

第一:space是可以被输入的input框里的,所以要阻止默认事件

@keydown.space.native.prevent="selAccountNameOpts"

注意哦,keyup是阻止不了空格键入的哈,因为这个时候已经输入上去啦~~~

last:祝福每一位研发小伙伴都能和PM沟通顺利~

你可能感兴趣的:(el-select特殊按键进行远程搜索)