Element?plus中el-input框回車(chē)觸發(fā)頁(yè)面刷新問(wèn)題以及解決辦法
更新時(shí)間：2024年03月12日 10:24:19 作者：魚(yú)干～
在el-form表單組件中el-input組件輸入內(nèi)容后按下Enter鍵刷新了整個(gè)頁(yè)面,下面這篇文章主要給大家介紹了關(guān)于Element?plus中el-input框回車(chē)觸發(fā)頁(yè)面刷新問(wèn)題以及解決辦法,需要的朋友可以參考下
技術(shù)：vue3+element plus的UI框架
今天做了一個(gè)小小的功能，就是基于elementUi框架的一個(gè)輸入框，需要監(jiān)聽(tīng)輸入框的回車(chē)事件，然后調(diào)取接口。
代碼如下：
<el-form :model="from" :inline="true">
<el-form-item label="身份證號(hào)">
<el-input
v-model="from.idCard"
placeholder="請(qǐng)輸入身份證"
clearable
prefix-icon="Search"
maxlength="18"
show-word-limit
autofocus
style="width: 260px"
@change="selectIdCard"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="selectIdCard">確定</el-button>
</el-form-item>
</el-form>
在輸入框回車(chē)后會(huì)刷新頁(yè)面，查詢的原因如下
解決方案：
在el-form里加上@submit.prevent ，
input輸入框里可以使用@keyup.enter監(jiān)聽(tīng)回車(chē)事件
<el-form :model="from" :inline="true" @submit.prevent>
<el-form-item label="身份證號(hào)">
<el-input
v-model="from.idCard"
placeholder="請(qǐng)輸入身份證"
clearable
prefix-icon="Search"
maxlength="18"
show-word-limit
autofocus
style="width: 260px"
@keyup.enter="selectIdCard"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="selectIdCard">確定</el-button>
</el-form-item>
</el-form>
回車(chē)后截圖如下
總結(jié)
到此這篇關(guān)于Element plus中el-input框回車(chē)觸發(fā)頁(yè)面刷新問(wèn)題以及解決辦法的文章就介紹到這了,更多相關(guān)el-input框回車(chē)觸發(fā)頁(yè)面刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Vue3中watch用法的相關(guān)資料,文章中有詳細(xì)的代碼示例,需要的朋友可以參考下2023-04-04
Vue3使用vue-router如何實(shí)現(xiàn)路由跳轉(zhuǎn)與參數(shù)獲取
這篇文章主要介紹了Vue3使用vue-router如何實(shí)現(xiàn)路由跳轉(zhuǎn)與參數(shù)獲取，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue.js?是一個(gè)流行的?JavaScript?框架,用于構(gòu)建用戶界面,它提供了一種簡(jiǎn)潔的方式來(lái)管理和渲染數(shù)據(jù),同時(shí)也支持與其他庫(kù)和工具的集成,本文主要來(lái)和大家聊聊如何在vue中使用canvas,有需要的可以參考下2023-09-09
這篇文章主要介紹了vue的mixins屬性詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue項(xiàng)目中引入vue-datepicker插件的詳解
這篇文章主要介紹了vue項(xiàng)目中引入vue-datepicker插件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue從零實(shí)現(xiàn)一個(gè)消息通知組件的方法詳解
這篇文章主要介紹了vue從零實(shí)現(xiàn)一個(gè)消息通知組件的方法,結(jié)合實(shí)例形式分析了vue實(shí)現(xiàn)消息通知組件的具體原理、實(shí)現(xiàn)步驟、與相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
vue基礎(chǔ)之事件v-onclick="函數(shù)"用法示例
這篇文章主要介紹了vue基礎(chǔ)之事件v-onclick="函數(shù)"用法,結(jié)合實(shí)例形式分析了vue.js事件v-on:click="函數(shù)"的data數(shù)據(jù)添加、點(diǎn)擊響應(yīng)、以及留言本功能相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
vue + Electron 制作桌面應(yīng)用的示例代碼
這篇文章主要介紹了vue + Electron 制作桌面應(yīng)用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-11-11
Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定詳細(xì)講解
這篇文章主要介紹了Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01
解決ElementUI組件中el-upload上傳圖片不顯示問(wèn)題
這篇文章主要介紹了解決ElementUI組件中el-upload上傳圖片不顯示問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10