标签：el handleSelect elementUI list queryString value response 字段 下拉框

想实现的效果

实现方法

<el-autocomplete
v-model="detail.CUSTOMER_NAME"
:fetch-suggestions="querySearchAsync"
@select="handleSelect"
placeholder="请输入内容"
>
</el-autocomplete>

 在script中添加下面两个函数

//queryString 为在框中输入的值
//callback 回调函数,将处理好的数据推回
querySearchAsync(queryString, callback) {
var list = [{}];
//调用的后台接口
let url = 后台接口地址 + queryString;
//从后台获取到对象数组
axios.get( url ).then((response)=>{
//在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示
for(let i of response.data){
i.value = i.想要展示的数据; //将想要展示的数据作为value
}
list = response.data;
callback(list);
}).catch((error)=>{
console.log(error);
});
}

 @select="handleSelect"  是选中某一列触发的事件,在这里item为选中字段所在的对象

handleSelect(item) {
    console.log(item);
    //do something
}

需要注意的地方:

后台获取的数组中每一个对象必须要有一个value字段, 因为autocomplete只识别value字段并在下拉列中显示

这里获取数据使用axios, 需要安装并引入

标签：el,handleSelect,elementUI,list,queryString,value,response,字段,下拉框
来源： https://www.cnblogs.com/LilLazy/p/15484592.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。