el-select下拉框模糊搜索加防抖
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),
更多推荐
所有评论(0)