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按回车键进行搜索的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。