Vue按回车键进行搜索

Vue项目按回车键进行搜索

最近有一个需求，为了用户方便进行搜索数据的时候不想点击搜索按钮，想要在表单内输入完成之后直接按回车键进行搜索。根据vue+ElementUUi完成。

下面直接上代码
一、第一种方法：
1、现在el-input里面添加这一行代码

@keyup.enter.native="seachEnter"

2、写seachEnter事件

seachEnter(e) {var keyCode = window.event ? e.keyCode : e.which;if (keyCode == 13) {this.getShopList(); //搜索按钮的回调}},

以上就是vue搜索时按回车键的功能实现

今天突然发现这样写还有一点bug，在第一次按回车进行搜索时会刷新页面，下面是解决方法。

<el-form @submit.native.prevent> //@submit.native.prevent要在外层的el-form中加上这段代码就可以了
</el-form>

二、第二种方法

<el-form@keyup.enter.native="handleSearchDatasetList" //这里要和搜索的事件名称一样@submit.native.prevent  //这句话禁止第一次进入页面回车搜索的时候刷新页面:model="tableQuery"label-width="80px"inlinesize="mini">......<el-form-item><el-button type="primary" @click="handleSearchDatasetList">搜索</el-button></el-form-item></el-form>
handleSearchDatasetList(){..... //搜索逻辑
}

Vue按回车键进行搜索相关推荐

vue element el-table 表格搜索搜索表格内容关键字标红关键字高亮显示
vue element el-table 表格搜索搜索表格内容关键字标红关键字高亮显示最近公司项目需求,搜索表格的内容,并且需要搜索的关键字高亮显示(关键字标红),如图所示最终效果: 1.在需要 ...
vue 前端本地存储搜索历史记录，删除某条记录，清空记录
vue 前端本地保存搜索历史,localStorage 一.保存历史的数组是由元素组成: [ "000004 SZ"] 在页面第一次加载的时候,从localStorage中获取历史 ...
vue实现下拉列表远程搜索示例（根据关键词模糊搜索）
" 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂 " 前言昨天的链接没有放上去--大家访问新站的时候,可以在浏览器地址栏中输入:www.穆雄雄.com或者www.muxio ...
Vue移动端项目——搜索联想建议功能的实现（结合watch属性和使用lodash防抖节流）
搜索联想建议 1. 基本思路: 当搜索框输入内容的时候,请求加载联想建议的数据将请求得到的结果绑定到模板中 2. 基本功能一.将父组件中搜索框输入的内容传给联想建议子组件二.在子组件中监视搜索框 ...
Vue入门 ---- 仿百度搜索
简述学习vue的第二节,由于2.0版本并不向下兼容,视频中的不少内不能实现.下面列出一些主要知识点 // v-on 可简写为@ // 事件冒泡是指当点击div内部的button触发show1()时, ...
基于Vue实现关键词实时搜索高亮显示关键词
最近在做移动real-time-search于实时搜索和关键词高亮显示的功能,通过博客的方式总结一下,同时希望能够帮助到别人~~~ 如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github ...
vue 使用 el-table 添加搜索框实现简单搜索功能，同时判断输入是否为空
前言: vue 项目使用 el-table ,想给表格上方添加搜索功能 ,虽然 element 官方文档自带类似的搜索框我这里没有使用官方文档的方法 ,我是通过使用两个操作数组的方法来实现搜 ...
vue + elemen可远程搜索select选择器的封装（思路及源码分享）
目录项目场景: 效果 1.封装下拉列表 2.页面中使用项目场景: 我有很多的Form表单,在Form表单内又有很多的select选择器,这些选择器的下拉列表都是通过后端的接口传回的数据渲染的,如果 ...
vue实现搜索框搜索新增_基于Vue.js实现简单搜索框
主要用到的知识很简单,简单的vuejs2.0的知识就够了.源码用了.vue构建和ES6,用了webpack打包等等.我资历还浅,先用一个简单的.js的写. 先看效果这里有两个组件,一个组件是logo ...

Vue按回车键进行搜索

Vue项目按回车键进行搜索

Vue按回车键进行搜索相关推荐

最新文章

热门文章