1. 实现效果:
2. 利用el-autocomplete实现远程搜索
el-autocomplete是使用fetch-suggestions方法实现,当输入的时候,会调用我们提供的方法,传入的参数是输入的value,以及callback。
把请求到的下拉列表通过callback返回(列表的每一项以key为value的形式传,也可以通过value-key换成其key)
<el-autocomplete v-model="namenick" :fetch-suggestions="searchNameNick"
placeholder="请输入内容" :trigger-on-focus="false" @select="searchNickhandle">
</el-autocomplete>
// :fetch-suggestions="searchNameNick" : 返回获取到数据的方法,也就是说输入框一获取焦点。就会自动调用该方法拿到数据。
// select="handleSelect" : 当选中建议项时,调用该方法。
async searchNameNick(queryString, callBack){
//整理参数
const params ={
nickname:queryString,
sys_code:4,
page:1,
page_size:100
}
// 定义空数组来接收返回的数据
let nicknameList = []
let res = await this.$proxy({
url: `xxxx`,
method: 'get',
params
})
if(res.code == 0){
//如果搜索结果为空返回“无匹配结果”
if(res.data.items.length == 0){
nicknameList.push({
value :"无匹配结果",
id : -1
})
callBack(nicknameList)
}else{
//对获取的值进行遍历,调整数据结构,value
for (let i = 0; i < res.data.items.length; i++) {
//需要注意的是回显的值必须是一个对象数组,且对象属性名称是 “value”,不然回显失败
nicknameList.push({
value: res.data.items[i].nickname,
id: res.data.items[i].user_id
})
}
clearTimeout(this.timeout)
this.timeout = setTimeout(() => {
callBack(nicknameList)
//通过callBack函数将回显数据返回
}, 1000)
}
}else{
this.$message({
type: 'error',
message: '请求失败'
});
}
},
searchNickhandle(item) {
if (item.id !== -1) {
console.log(item.id, '昵称点击回调');
this.user_id = item.id
}
},
3. 利用el-select实现远程搜索
el-select的远程搜索是通过remote-method来实现。当你输入的时候,会调用对应的remote- method方法来实现。参数是传入当前输入的value值。 然后我们请求后,把el-select的option赋 值就可以了。文章来源:https://www.toymoban.com/news/detail-504350.html
<el-select
v-model="value"
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="reqLoading"
>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
export default {
data () {
return {
value: '',
reqLoading: false,
options: []
}
},
methods: {
remoteMethod (query) {
if (query !== '') {
this.reqLoading = true
setTimeout(() => {
this.reqLoading = false
this.options = [{label: '答案cp3',value: '答案cp3'}]
}, 200)
} else {
this.options = []
}
}
}
4. 总结:文章来源地址https://www.toymoban.com/news/detail-504350.html
- el-autocomplete主要是针对输入建议,value会实时刷新,选中不会有选中效果。
- el-select value不会实时刷新,选中才会更新value,并且选中会有选中效果
到了这里,关于element-ui的两种远程搜索实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!