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>
相关推荐
wuli_滔滔9 小时前
DevUI云控制台实战:多云管理平台前端架构解密
前端·架构·devui·matechat
深耕AI9 小时前
【wordpress系列教程】02 Blocksy主题
运维·服务器·前端
我笔记10 小时前
vue 子父调用
前端·javascript·vue.js
毕设源码-朱学姐11 小时前
【开题答辩全过程】以 基于vue.js的校园二手平台为例,包含答辩的问题和答案
前端·javascript·vue.js
m0_4711996311 小时前
【JavaScript】Set 和 Map 核心区别与实战用法(ES6 集合全解析)
前端·javascript·es6
执笔诉情殇〆11 小时前
使用AES加密方法,对Springboot+Vue项目进行前后端数据加密
vue.js·spring boot·后端
hoiii18712 小时前
MATLAB中主成分分析(PCA)与相关性分析的实现
前端·人工智能·matlab
大波V512 小时前
用 nvm 彻底重装 Node 12.22.12(确保干净)
前端
和和和12 小时前
React Scheduler为何采用MessageChannel调度?
前端·javascript
Ric97012 小时前
Mac上Git不识别文件名大小写修改?一招搞定!
前端