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框回车触发页面刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3中watch的最佳用法
这篇文章主要给大家介绍了关于Vue3中watch用法的相关资料,文章中有详细的代码示例,需要的朋友可以参考下
2023-04-04
Vue3使用vue-router如何实现路由跳转与参数获取
这篇文章主要介绍了Vue3使用vue-router如何实现路由跳转与参数获取，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
vue使用canvas的教程详解
Vue.js 是一个流行的 JavaScript 框架,用于构建用户界面,它提供了一种简洁的方式来管理和渲染数据,同时也支持与其他库和工具的集成,本文主要来和大家聊聊如何在vue中使用canvas,有需要的可以参考下
2023-09-09
vue的mixins属性详解
这篇文章主要介绍了vue的mixins属性详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
vue项目中引入vue-datepicker插件的详解
这篇文章主要介绍了vue项目中引入vue-datepicker插件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
vue从零实现一个消息通知组件的方法详解
这篇文章主要介绍了vue从零实现一个消息通知组件的方法,结合实例形式分析了vue实现消息通知组件的具体原理、实现步骤、与相关操作技巧,需要的朋友可以参考下
2020-03-03
vue基础之事件v-onclick="函数"用法示例
这篇文章主要介绍了vue基础之事件v-onclick="函数"用法,结合实例形式分析了vue.js事件v-on:click="函数"的data数据添加、点击响应、以及留言本功能相关操作技巧,需要的朋友可以参考下
2019-03-03
vue + Electron 制作桌面应用的示例代码
这篇文章主要介绍了vue + Electron 制作桌面应用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-11-11
Vue数据与事件绑定以及Class和Style的绑定详细讲解
这篇文章主要介绍了Vue数据与事件绑定以及Class和Style的绑定，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2023-01-01
解决ElementUI组件中el-upload上传图片不显示问题
这篇文章主要介绍了解决ElementUI组件中el-upload上传图片不显示问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10