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>
相关推荐
燕落南枝2 分钟前
CSS 表单选择器与伪元素选择器详解
前端·css
拖孩3 分钟前
一个人 + AI 做的小程序,今天,正式回本了
前端·后端·微信小程序
进击的丸子9 分钟前
APP 人脸识别增值版 SDK:Camera2 无缝接入指南
前端·前端框架·代码规范
开开心心就好13 分钟前
本地文件搜索工具,双击Ctrl就能呼出搜索
java·服务器·前端·支持向量机·ffmpeg·音视频·模拟退火算法
知了清语24 分钟前
SVG 缩放预览:F12 无法定位子元素 & 放大模糊
前端
AN24 分钟前
一个人,带着一群 AI:一个 10 年前端如何做出几十个团队在用的在线文档
前端
ByteCoder.25 分钟前
班前十分钟的清单,按体检引导单来写
java·服务器·前端·助播虾
小大宇34 分钟前
vue知识点9-标签上的ref
前端·javascript·vue.js
艺杯羹36 分钟前
告别大模型滥用与延迟失控:确定性优先法则与本地规则引擎实战
前端·人工智能·系统架构
MetWeave38 分钟前
一根杆与一张场:把你的机场画上地图
前端·数据可视化