Vue項(xiàng)目按回車鍵進(jìn)行搜索

最近有一個(gè)需求，為了用戶方便進(jìn)行搜索數(shù)據(jù)的時(shí)候不想點(diǎn)擊搜索按鈕，想要在表單內(nèi)輸入完成之后直接按回車鍵進(jìn)行搜索。根據(jù)vue+ElementUUi完成。

下面直接上代碼
一、第一種方法：
1、現(xiàn)在el-input里面添加這一行代碼

@keyup.enter.native="seachEnter"

2、寫seachEnter事件

seachEnter(e) {var keyCode = window.event ? e.keyCode : e.which;if (keyCode == 13) {this.getShopList(); //搜索按鈕的回調(diào)}},

以上就是vue搜索時(shí)按回車鍵的功能實(shí)現(xiàn)

今天突然發(fā)現(xiàn)這樣寫還有一點(diǎn)bug，在第一次按回車進(jìn)行搜索時(shí)會(huì)刷新頁面，下面是解決方法。

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

二、第二種方法

<el-form@keyup.enter.native="handleSearchDatasetList" //這里要和搜索的事件名稱一樣@submit.native.prevent //這句話禁止第一次進(jìn)入頁面回車搜索的時(shí)候刷新頁面:model="tableQuery"label-width="80px"inlinesize="mini">......<el-form-item><el-button type="primary" @click="handleSearchDatasetList">搜索</el-button></el-form-item></el-form> handleSearchDatasetList(){..... //搜索邏輯 }

總結(jié)

以上是生活随笔為你收集整理的Vue按回车键进行搜索的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。