在elementUI中使用 el-autocomplete 实现远程搜索的下拉框

1. 在template加入如下标签

       <el-form-item label="文章库" :label-width="formLabelWidth" ><el-autocompletev-model="addTopic.name":fetch-suggestions="querySearchAsync"placeholder="请输入文章标题"@select="handleSelect"  :clearable="true"></el-autocomplete></el-form-item>

 

2. 在template加入如下标签

  //queryString 为在框中输入的值
//callback 回调函数,将处理好的数据推回async querySearchAsync (queryString, cb) {if (queryString !== '') {let res = await requestSearchTopic(queryString)let {data, status} = res.dataif (status === 200) {for (let i of data) {//在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示i.value = i.name + '\xa0\xa0\xa0\xa0作者：' + i.creator}let restaurants = dataclearTimeout(this.timeout)// 设置定时任务将restaurants返回this.timeout = setTimeout(() => {cb(restaurants)}, 50 * Math.random())}}},

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

            handleSelect (item) {this.addTopic.topicId = item.idthis.addTopic.name = item.namethis.addTopic.creator = item.creator},

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


参考文档：https://blog.csdn.net/qq_37746973/article/details/78402812