利用element-ui实现远程搜索两种实现方式
作者：前端大鹌鹑
这篇文章主要介绍了利用element-ui的两种远程搜索实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
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赋 值就可以了。
<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. 总结：
- el-autocomplete主要是针对输入建议，value会实时刷新，选中不会有选中效果。
- el-select value不会实时刷新，选中才会更新value，并且选中会有选中效果
到此这篇关于element-ui的两种远程搜索实现的文章就介绍到这了,更多相关element-ui远程搜索内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！