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

Posted 2021-12-11 mailyuan

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