标签：label width ring 任务 sele 显示 href ref let
1. 在template加入如下标签
<el-form-item label="文章库" :label-width="formLabelWidth" > <el-autocomplete v-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.data if (status === 200) { for (let i of data) { //在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示 i.value = i.name + ‘\xa0\xa0\xa0\xa0作者：‘ + i.creator } let restaurants = data clearTimeout(this.timeout) // 设置定时任务将restaurants返回 this.timeout = setTimeout(() => { cb(restaurants) }, 50 * Math.random()) } } },
@select="handleSelect" 是选中某一列触发的事件,在这里item为选中字段所在的对象
handleSelect (item) { this.addTopic.topicId = item.id this.addTopic.name = item.name this.addTopic.creator = item.creator },
需要注意的地方:
后台获取的数组中每一个对象必须要有一个value字段, 因为autocomplete只识别value字段并在下拉列中显示
参考文档：https://blog.csdn.net/qq_37746973/article/details/78402812
在elementUI中使用 el-autocomplete 实现远程搜索的下拉框
标签：label width ring 任务 sele 显示 href ref let
原文地址：https://www.cnblogs.com/mailyuan/p/10949320.html
