事情起因在:我使用element ui框架里的远程搜索框,在单选时,组件内部已经做了防抖,query是在一段时间内的字符串。但是在多选时,并没有做防抖,而是每输入一个字符都要向后台发一次请求,所以必须防抖,官方推荐使用lodash的debounce
在解决这个问题时,我遇到的坎儿主要有以下:
我首先在项目里用npm安装lodash,先全局安装,然后安装到项目
npm install -g lodash
npm install --save lodash
安装后,我就在我要用防抖的组件里,引入lodash
var lodash = require('lodash');
以下就开始了走弯路
- 我百度后,查询到debounce总和keyup一起使用,所以我就在我的搜索框里绑定了keyup事件,但是绑定的事件并没有生效,通过查询得知,在element ui封装了input,所以要在后面加上.native才可以覆盖原来的事件
<el-select
v-model="AddCandidateFrom.follow_hr"
filterable
multiple
placeholder="请选择跟进HR"
@keyup.native="getRemoteFollow"
:loading="followLoading"