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>
相关推荐
愚者Pro1 小时前
Flutter Widget组件学习(专为 Uniapp 转 Flutter 定制)
vue.js·学习·flutter·uni-app
道里2 小时前
花了 5 万刀用 AI 写代码之后,这是我的全部经验
前端·人工智能
Royzst2 小时前
xml知识点
java·服务器·前端
IT_陈寒3 小时前
React useEffect闭包陷阱差点把我整失业了
前端·人工智能·后端
kyriewen3 小时前
推行AI写代码一年后,Code Review变成了新的加班理由
前端·ai编程·cursor
前端环境观察室3 小时前
给 Agent Browser Workflow 加一层可观测性:Trace、Snapshot 和 Review Queue
前端
柒瑞4 小时前
Superpowers结合Claude code浅实战
前端
Nian.Baikal4 小时前
从零搭建离线地图服务:Nginx + Cesium/Leaflet 实战指南
运维·前端·nginx
前端毕业班4 小时前
uniapp web 灵活控制 style scoped
前端·javascript·vue.js
lichenyang4534 小时前
鸿蒙业务需求实战:AI 问题走马灯卡片实现复盘
前端