elementUI 输入框按回车刷新页面问题

分析原因:

当 el-form 表单内只有一个 el-input 输入框时,且type为text类型时,在输入框内按回车就会触发表单的提交事件。

而当 el-form 表单内有多个 el-input 输入框时,按回车不会执行任何操作。

使用.prevent修饰符来阻止默认的表单提交行为:

@submit.native.prevent注解添加到el-form标签上从而阻止了按下回车键时的页面刷新

.native 表示对一个组件绑定系统原生事件

.prevent 表示阻止默认事件(如form的submit事件默认提交会刷新页面,.prevent修饰符可以阻止该默认事件)

html 复制代码
<el-form @submit.native.prevent>
  <el-form-item>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
  </el-form-item>
</el-form>
相关推荐
Carson带你学Android6 小时前
别再乱学了!深度解读 Google 官方发布 Android 6 大核心 Skills
android·前端·ai编程
张风捷特烈6 小时前
状态管理大乱斗#06 | Riverpod 源码评析 (下) - 外功心法
android·前端·flutter
ZC跨境爬虫6 小时前
跟着 MDN 学 HTML day_16:(音频与视频处理——从画布滤镜到3D沉浸音频的进阶指南)
前端·javascript·ui·3d·html·音视频
魔术师Grace6 小时前
普通人学 AI,不要一上来就学提示词
前端·人工智能·程序员
m0_738120727 小时前
Webshell流量分析——常见扫描器AWVS,goby,xray流量特征分析
服务器·前端·安全·web安全·网络安全
QQ_1880838007 小时前
python+flask+vue在线宠物医疗预约平台的设计与实现_b5z03zls
vue.js·python·flask
神奇的程序员15 小时前
开发了一个管理本地开发环境的软件
前端·flutter
XiYang-DING16 小时前
HTML 核心标签
前端·html
Csvn16 小时前
技术选型方法论
前端
Csvn16 小时前
前端架构演进:从页面到平台的十年变革
前端