el-select下拉框模糊搜索加防抖

1. 安装 loadsh 依赖包 (loadsh官方文档)

npm install –save lodash

2. 在 main.js 文件中引入

import _ from 'lodash'
Vue.prototype._ = _

3. 使用

<el-select
    v-model="value"
    placeholder="请选择"
    filterable
    remote
    clearable
    :remote-method="remoteMethod"
    :loading="remoteLoading"
    no-match-text="没有匹配到数据"
>
    <el-option
        v-for="item in userList"
        :key="item.id"
        :label="item.label"
        :value="item.value"
     >
     </el-option>
</el-select>

// 输入值发生变化时的回调函数
remoteMethod(query) {        
    if(query !== '') {
        this.remoteLoading = true
        this.getRemote(query)
    } else {
    	this.userList = []
    }
},
// 防抖，这里设置300毫秒请求一次后台
getRemote: _.debounce(function(query){
    getUserList({
    	usernameOrNumber: query
    }).then(res => {
    	this.remoteLoading = false
    	this.userList = res.data.data
    }).catch(err => {
    	this.remoteLoading = false
    })
}, 300),