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>
相关推荐
lichenyang4539 小时前
Docker 学习笔记(一):为什么需要镜像、容器和仓库?
前端
kyriewen9 小时前
别再对着 TypeScript 报错发呆了:我把 10 个最常见的红色波浪线翻译成了人话
前端·javascript·typescript
IT_陈寒9 小时前
SpringBoot自动配置的坑,我的API突然就404了
前端·人工智能·后端
暴走的小呆10 小时前
Vue 2 中 Object 的变化侦测:从 getter/setter 到 Dep、Watcher、Observer
vue.js
奇奇怪怪的10 小时前
Embedding 模型 10+ 横向评测
前端
陈广亮10 小时前
Monorepo 从 0 到 1 实操指南 2026 版:pnpm catalogs + Turborepo 2.x + changesets 全链路
前端
子兮曰10 小时前
OpenMontage 深度解剖:你的 AI 编程助手,其实是个视频工作室
前端·后端·ai编程
敲代码的鱼10 小时前
PDF 预览与签名批注写回 支持安卓 iOS 鸿蒙 UTS插件
android·前端·ios
英勇无比的消炎药10 小时前
TinyVue v-auto-tip: 文本超长自动提示的优雅方案
vue.js