Vue Autocomplete 自动完成功能简单示例
更新时间：2019年05月25日 10:44:10 作者：xudejun
这篇文章主要介绍了Vue Autocomplete 自动完成功能,结合简单示例形式分析了Vue使用el-autocomplete组件实现自动完成功能相关操作技巧,需要的朋友可以参考下
本文实例讲述了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.js程序设计有所帮助。
相关文章
这篇文章主要介绍了使用Element实现表格表头添加搜索图标和功能，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue递归获取父元素的元素实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue中的keep-alive内置组件缓存，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
详解vue2.0 transition 多个元素嵌套使用过渡
这篇文章主要介绍了详解vue2.0 transition 多个元素嵌套使用过渡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
elementui+vue+axios实现文件上传本地服务器
这篇文章主要为大家详细介绍了elementui+vue+axios实现文件上传本地服务器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了Antd中单个DatePicker限定时间输入范围操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最近在使用element-ui的表格组件时,遇到了搜索框功能的实现问题,这篇文章主要给大家介绍了关于如何使用elementUI组件实现表格的分页及搜索功能的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue-cli axios请求方式及跨域处理问题,文中还给大家提到了vue中axios解决跨域问题和拦截器使用，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-03-03
Editor.js是一个用于构建具有完全可定制化块结构的现代编辑器的开源库,它提供了一个简洁、可扩展和易于使用的接口,使开发人员能够创建拥有丰富内容和互动性的编辑器,这篇文章主要给大家介绍了关于vue3使用富文本编辑器Editor.js的简单方法,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue键盘事件keyup、keydown的作用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
最新评论