快捷導(dǎo)航

Element?plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法

更新時(shí)間：2024年03月12日 10:24:19 作者：魚干～

在el-form表單組件中el-input組件輸入內(nèi)容后按下Enter鍵刷新了整個(gè)頁面,下面這篇文章主要給大家介紹了關(guān)于Element?plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法,需要的朋友可以參考下

技術(shù)：vue3+element plus的UI框架

今天做了一個(gè)小小的功能，就是基于elementUi框架的一個(gè)輸入框，需要監(jiān)聽輸入框的回車事件，然后調(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>

在輸入框回車后會(huì)刷新頁面，查詢的原因如下

解決方案：

在el-form里加上@submit.prevent ，

input輸入框里可以使用@keyup.enter監(jiān)聽回車事件

 <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>

回車后截圖如下

總結(jié)

到此這篇關(guān)于Element plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法的文章就介紹到這了,更多相關(guān)el-input框回車觸發(fā)頁面刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue自定義指令v-focus實(shí)例詳解
這篇文章主要為大家介紹了Vue自定義指令v-focus實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Vue中Table組件Select的勾選和取消勾選事件詳解
這篇文章主要為大家詳細(xì)介紹了Vue中Table組件Select的勾選和取消勾選事件詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-03-03
vue關(guān)閉瀏覽器退出登錄的實(shí)現(xiàn)示例
本文主要介紹了vue關(guān)閉瀏覽器退出登錄，一般都是根據(jù)根據(jù)beforeunload和unload這兩個(gè)事件執(zhí)行的。本文就詳細(xì)的介紹一下如何實(shí)現(xiàn)，感興趣的可以了解一下
2021-12-12
Vue3使用watch監(jiān)聽響應(yīng)式數(shù)據(jù)變化的方法詳解
在?Vue?3?的組合式?API（Composition?API）中,watch?是一個(gè)非常核心且強(qiáng)大的工具,用于監(jiān)聽響應(yīng)式數(shù)據(jù)的變化并執(zhí)行相應(yīng)的副作用操作,本文將結(jié)合實(shí)際代碼示例,深入講解?watch?的使用方法、參數(shù)配置、常見寫法及其應(yīng)用場(chǎng)景,需要的朋友可以參考下
2026-02-02
Vue?cli3?chainWepack使用方法示例詳解
這篇文章主要為大家介紹了Vue?cli3?chainWepack使用方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-11-11
基于Vue 實(shí)現(xiàn)一個(gè)中規(guī)中矩loading組件
這篇文章主要介紹了基于Vue 實(shí)現(xiàn)一個(gè)中規(guī)中矩loading組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-04-04
解決antd 下拉框 input [defaultValue] 的值的問題
這篇文章主要介紹了解決antd 下拉框 input [defaultValue] 的值的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
同步cookie插件原理及實(shí)現(xiàn)示例
這篇文章主要為大家介紹了同步cookie插件原理及實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
vue中為何方法要寫在methods的里面
這篇文章主要介紹了vue中為何方法要寫在methods的里面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue項(xiàng)目打包并部署到Linux服務(wù)器的詳細(xì)過程
我們?cè)跁?huì)開發(fā)項(xiàng)目的同時(shí),也應(yīng)該了解一下項(xiàng)目是如何部署到服務(wù)器的,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包并部署到Linux服務(wù)器的相關(guān)資料,需要的朋友可以參考下
2023-01-01