Vue Autocomplete 自动完成功能简单示例


Posted in Javascript onMay 25, 2019

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
利用cookie记住背景颜色示例代码
Nov 04 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
ES5新增数组的实现方法
May 12 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 #Javascript
了解JavaScript中的选择器
May 24 #Javascript
Javascript通过控制类名更改样式
May 24 #Javascript
redux.js详解及基本使用
May 24 #Javascript
javascript获取元素的计算样式
May 24 #Javascript
运用js实现图层拖拽的功能
May 24 #Javascript
了解javascript中let和var及const关键字的区别
May 24 #Javascript
You might like
php 图片上添加透明度渐变的效果
2009/06/29 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
AngularJS基础知识
2014/12/21 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
Vue 修改网站图标的方法
2020/12/31 Vue.js
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
德国帽子专家:Hutshopping
2019/11/03 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
建筑专业自荐信
2013/10/18 职场文书
工程业务员工作职责
2013/12/07 职场文书
公关活动策划方案
2014/05/25 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python