Vue Autocomplete 自动完成

页面 :

// 用闭包的方式,index表示第几个组件
<el-autocomplete
  v-model="state4"
  :fetch-suggestions="querySearchAsync"
  placeholder="请输入内容"
  @select="((item)=>{handleSelect(item, index)})">
</el-autocomplete>

JS:


methods: {
        querySearchAsync(queryString, callback) {
            var list = [{}];
            //调用的后台接口
            //let url = 后台接口地址 + queryString;
            //从后台获取到对象数组
            this.$http({
                url: this.$http.adornUrl('yjtgateway/goods'),
                method: 'get',
                params: this.$http.adornParams({keyword:queryString})
            }).then(({data}) => {
                for(let i of data.content){
                    i.value = i.goodsCode;  //将想要展示的数据作为value
                }
                list = data.content;
                callback(list);
            }).catch((error) => {
                console.log(error)
            })
        },
        handleSelect(item,index) {
          this.dataForm.items[index] = item
        }
}

 

Vue Autocomplete是指在Vue框架下使用的自动完成功能。Autocomplete是指输入字段在用户输入时,自动显示匹配的选项列表,方便用户选择。在Vue中,可以使用element-ui组件库提供的el-autocomplete组件来实现自动完成功能。默认情况下,element-ui的el-autocomplete组件是将autocomplete禁用的,需要手动设置auto-complete="on"来启用自动完成功能。同时,还可以参考Vue Autocomplete相关的文档和示例来学习如何在Vue中使用el-autocomplete组件实现自动完成功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [在vue+element 中使用 autocomplete=on,实现自动补全](https://blog.youkuaiyun.com/sinat_29740819/article/details/108563356)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Vue Autocomplete 自动完成功能简单示例](https://download.youkuaiyun.com/download/weixin_38617615/12941720)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值