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>
相关推荐
kyriewen3 分钟前
你的代码仓库变成“毛线团”了?Monorepo 用 Turborepo 拆成“乐高积木”
前端·javascript·面试
身如柳絮随风扬6 分钟前
你知道什么是 Ajax 吗?—— 从入门到原理,一篇彻底搞懂
前端·ajax·okhttp
旷世奇才李先生31 分钟前
Vue3\+TypeScript 2026实战——企业级前端项目架构搭建与性能优化全指南
前端·架构·typescript
Beginner x_u1 小时前
前端八股整理(工程化 02)|CommonJS/ESM、Webpack Loader/Plugin 与Vite 对比
前端·webpack·node.js·plugin·loader
openKaka_1 小时前
createRoot 到底创建了什么:FiberRootNode 和 HostRootFiber 的初始化过程
前端·javascript·react.js
习明然2 小时前
UniApp开发体验感受总结
前端·uni-app
刀法如飞3 小时前
Claude Code Skills 推荐:2026年最值得安装的10个AI技能
前端·后端·ai编程
Lee川3 小时前
面试手写 KeepAlive:React 组件缓存的实现原理
前端·react.js·面试
墨染天姬3 小时前
【AI】cursor提示词小技巧
前端·数据库·人工智能
烛阴4 小时前
TEngine 入门系列(一):TEngine 是什么 & 为什么选它
前端·unity3d