1.实现效果:将输入的值传到获取昵称列表的接口中,获取到相关昵称列表,进行回显。
2.实现步骤
<el-autocomplete v-model="namenick" :fetch-suggestions="searchNameNick"
placeholder="请输入内容" :trigger-on-focus="false" @select="searchNickhandle">
</el-autocomplete>
v-model="namenick" 输入的值通过namenick展示
: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++) {
console.log('111');
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: '请求失败'
});
}
},
注意:功能完成。
需要注意的是回显的值必须是一个对象数组,且对象属性名称是 “value”,不然回显失败
queryString, callBack这俩个参数也是组件自己的,callBack是一个方法,用来resolve结果;queryString是用户输入的关键字。