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"
   inline
   size="mini"
 >
 ......
 <el-form-item>
    <el-button type="primary" @click="handleSearchDatasetList"
	      >搜索</el-button
	    >
	  </el-form-item>
 </el-form>
handleSearchDatasetList(){
	..... //搜索逻辑
}