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>
相关推荐
江公望12 小时前
HTML5 History 模式 5分钟讲清楚
前端·html·html5
云和数据.ChenGuang12 小时前
Zabbix Web 界面安装时**无法自动创建配置文件 `zabbix.conf.php`** 的问题
前端·zabbix·运维技术·数据库运维工程师·运维教程
码界奇点12 小时前
Java Web学习 第15篇jQuery万字长文详解从入门到实战解锁前端交互新境界
java·前端·学习·jquery
前端老曹12 小时前
vue3 三级路由无法缓存的终极解决方案
前端·javascript·vue.js·vue
兮动人12 小时前
Google Chrome 142更新引发内网访问危机:原理、影响与全面解决方案
前端·chrome
PAQQ12 小时前
ubuntu22.04 搭建 Opencv & C++ 环境
前端·webpack·node.js
这是个栗子12 小时前
git报错:Reinitialized existing Git repository in ...
前端·git·github
ghfdgbg12 小时前
15. Vue工程化 + ElementPlus
前端·javascript·vue.js
Onlyᝰ12 小时前
前端使用jscpd查项目重复率
前端
pandarking12 小时前
[CTF]攻防世界:web-unfinish(sql二次注入)
前端·数据库·sql·web安全·ctf