element autocomplete-优快云博客

本文详细介绍了如何使用 Element UI 中的 el-autocomplete 组件实现远程搜索功能，并通过 axios 获取数据，展示了如何配置和使用该组件来实现动态下拉列表，同时对比了其与 select 组件的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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
}