Element plus中el-input框回车触发页面刷新问题以及解决办法

更新时间：2024年03月12日 10:24:19 作者：鱼干～

在el-form表单组件中el-input组件输入内容后按下Enter键刷新了整个页面,下面这篇文章主要给大家介绍了关于Element plus中el-input框回车触发页面刷新问题以及解决办法,需要的朋友可以参考下

技术：vue3+element plus的UI框架

今天做了一个小小的功能，就是基于elementUi框架的一个输入框，需要监听输入框的回车事件，然后调取接口。

代码如下：

 <el-form :model="from" :inline="true">
      <el-form-item label="身份证号">
        <el-input
          v-model="from.idCard"
          placeholder="请输入身份证"
          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>

在输入框回车后会刷新页面，查询的原因如下

解决方案：

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

input输入框里可以使用@keyup.enter监听回车事件

 <el-form :model="from" :inline="true" @submit.prevent>
      <el-form-item label="身份证号">
        <el-input
          v-model="from.idCard"
          placeholder="请输入身份证"
          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>

回车后截图如下

总结

到此这篇关于Element plus中el-input框回车触发页面刷新问题以及解决办法的文章就介绍到这了,更多相关el-input框回车触发页面刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue自定义指令v-focus实例详解
这篇文章主要为大家介绍了Vue自定义指令v-focus实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
Vue中Table组件Select的勾选和取消勾选事件详解
这篇文章主要为大家详细介绍了Vue中Table组件Select的勾选和取消勾选事件详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-03-03
vue关闭浏览器退出登录的实现示例
本文主要介绍了vue关闭浏览器退出登录，一般都是根据根据beforeunload和unload这两个事件执行的。本文就详细的介绍一下如何实现，感兴趣的可以了解一下
2021-12-12
Vue3使用watch监听响应式数据变化的方法详解
在 Vue 3 的组合式 API（Composition API）中,watch 是一个非常核心且强大的工具,用于监听响应式数据的变化并执行相应的副作用操作,本文将结合实际代码示例,深入讲解 watch 的使用方法、参数配置、常见写法及其应用场景,需要的朋友可以参考下
2026-02-02
Vue cli3 chainWepack使用方法示例详解
这篇文章主要为大家介绍了Vue cli3 chainWepack使用方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
基于Vue 实现一个中规中矩loading组件
这篇文章主要介绍了基于Vue 实现一个中规中矩loading组件,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
解决antd 下拉框 input [defaultValue] 的值的问题
这篇文章主要介绍了解决antd 下拉框 input [defaultValue] 的值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
同步cookie插件原理及实现示例
这篇文章主要为大家介绍了同步cookie插件原理及实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
vue中为何方法要写在methods的里面
这篇文章主要介绍了vue中为何方法要写在methods的里面，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue项目打包并部署到Linux服务器的详细过程
我们在会开发项目的同时,也应该了解一下项目是如何部署到服务器的,下面这篇文章主要给大家介绍了关于vue项目打包并部署到Linux服务器的相关资料,需要的朋友可以参考下
2023-01-01