zoukankan      html  css  js  c++  java
  • 在elementUI中使用 el-autocomplete 实现远程搜索的下拉框

    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 + 'xa0xa0xa0xa0作者:' + 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

  • 相关阅读:
    网恋现代人的童话
    男人爱女人
    在Web页面中管理服务
    wcf使用入门学习笔记
    table显示细线边框
    wcf整理资料
    启动sqlserver服务的时候报错
    命名规范
    .net中使用xsl文件作为导航菜单
    wcf如何选择绑定
  • 原文地址:https://www.cnblogs.com/mailyuan/p/10949320.html
Copyright © 2011-2022 走看看