el-form表单-解决按下回车页面刷新

已于 2023-06-12 17:27:55 修改
阅读量638 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-06-12 17:25:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65039133/article/details/131173433
版权

刷新原因：在element-ui中，el-form中只有一个el-input时，按下回车会刷新页面

解决办法：给el-form添加@submit.native.prevent属性

<el-form @submit.native.prevent>
    <el-form-item label="姓名:">
           <el-input v-model="form.name"placeholder="请输入"></el-input>
    </el-form-item>
</el-form>

aaabugaaa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
搞定：el-form el-form-item 下input框回车刷新整个页面
乐于分享，共同成长
01-31 350
搞定：el-form el-form-item 下input框回车刷新整个页面
el-form表单回车提交，浏览器会刷新页面
DazzlingPing的博客
12-14 777
el-form回车 刷新页面
Element-UI中el-form内部在输入框回车导致刷新页面的问题解决。
TangBoBoa的博客
03-31 1123
当el-form表单里面只有一个el-input输入框的时候，在输入框选中时按回车会刷新页面
elementUI 输入框按回车刷新页面分析与解决
先知三日
06-29 1899
注意：如果你发现@keydown.enter.prevent在Element UI的组件中不起作用，那可能是因为组件内部实际上是一个包装了原生的组件，所以你需要使用.native修饰符来监听原生的keydown事件。而当你使用@keydown.enter.native.prevent时，你是在按键被按下的那一刻阻止了默认的表单提交行为，所以它能够有效地阻止表单的提交。在阻止表单提交的情况下，通常使用@keydown.enter更为有效。
elementui el-form 默认不支持回车提交，怎么解决
Shelly Long的博客
12-06 1880
概念： 1.在表单的提交按钮上添加 Vue 原生属性native-type="submit"可以让按钮变为表单提交按钮； 2.阻止表单默认提交事件（默认是阻止），在表单上（即<el-form>标签上）添加@submit.native.prevent即可 3.因为el-form默认不支持表单回车提交，在表单上（即<el-form>标签上）添加@keyup.ent...
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
在本场景中，使用了Element UI库的`el-form`组件来构建表单，它提供了丰富的表单元素和表单验证功能。在实现添加和编辑功能时，一个常见的挑战是如何在表单提交后清空数据，以便用户可以进行下一次操作，比如添加新...
el-form 多层级表单的实现示例
10-14
主要介绍了el-form 多层级表单的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
el-form-renderer:data数据驱动的动态复杂表格解决方案
04-28
形式呈现器目录灵感贡献贡献者执照 介绍 什么el-form-renderer基于element-ui ，但不限于element-ui组件。 在完全继承element-ui的form属性的基础上，进行了扩展。 一些非形式的组件或自定义组件（例如图片上传和RTF...
elementUI中input回车触发页面刷新问题和解决方法
GG_Zdd的博客
03-31 7053
了解并解决elementUI中form表单内单一input框回车触发刷新的问题
Vue.js：element-ui组件库el-form表单el-input输入框按下回车键会刷新页面的问题
彭世瑜的博客
04-29 1153
当form表单中只有一个input时，按下回车建会自动触发页面的提交功能， 产生刷新页面的行为 <el-input v-model="value" @keyup.enter.native="handleEnter"/> 需要在el-form 中阻止表单的默认提交行为 <el-form @submit.native.prevent> <el-input v-model="value" @keyup.enter.native="handleEnter"/> <
el-form按回车键URL出现问号?
weixin_43407997的博客
01-31 356
el-form按回车键URL出现问号 阻止表单默认提交
el-form表单，按下回车后刷新页面的问题
最新发布
猿始森林
03-29 369
当你的表单只有一项时，按下回车默认会提交表单，所以会出现刷新页面的现象。如上，指定回车或提交的事件，就可以避免刷新页面的问题。
强制刷新组件$forceUpdate()
wdw123156的博客
03-15 1439
当组件是正常渲染的情况下，但是页面并没有将该变换的组件数据更新时可以尝试用$forceUpdate()方法强制刷新组件。 <template> <div> <el-form-item label="风险类型" prop="RiskFun" v-if="RiskFunRemone">:&nbsp;&nbsp; <el-select v-model="ruleForm.RiskFun" @change="Risk
vue+element 键盘回车事件导致页面刷新的问题
源码好优多
05-10 1万+
背景 今天发现输入框输入内容后回车就会刷新页面 解决 &lt;el-form :inline="true" @submit.native.prevent&gt; &lt;/el-form&gt; el-from 加上 @submit.native.prevent 具体是参考element-ui文档解决的 W3C 标准中有如下规定： When there...
elementUI form表单回车刷新问题
u012551992的博客
07-01 1594
当form表单中只有一个item时，input点击回车会刷新页面，代码如下： <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="0px"> <el-form-item> <el-input class="searchinput" ...
解决form表单提交刷新问题
sunlizhen的专栏
01-17 7297
vue + element ui 阻止表单输入框回车刷新页面 如果button不设置 type='button' 问题 　　在 vue+element ui 中只有一个输入框（el-input）的情况下，回车会提交表单。 解决方案 　　在 el-form 上加上 @submit.native.prevent 这个则会阻止表单回车提交。 测试 下面的代码出现表单回车提交 &lt;...
解决 element-ui form 表单按回车后整个页面刷新
Zoey_J的博客
08-20 1485
设置 @keyup.enter.native 后，当 el-form 中只有一个输入框时，按下回车会刷新整个页面，只需要在 el-form 上加 @submit.native.prevent 即可。 <el-form :model="queryParams" @submit.native.prevent> <el-form-item label="名称" prop="name"> <el-input v-model="queryParams.name" @keyu
vue form 表单提交后刷新页面
热门推荐
山外小楼
01-15 1万+
最近做的项目中，有增删改表格功能，在操作后需要实时更新页面数据。下面可以这样解决。 1。在methods中 定义好一个初始化渲染实例。例如 lnitializationData(){//初始化页面数据 this.$http.get("/permit/specific", { params: { page: this.loca
el-form 表单校验 不要在el-form-item下显示
03-21
el-form 是 Element UI 提供的表单组件，用于快构建表单界面。el-form 表单校验是指对表单中的输入内容进行验证，确保用户输入的数据符合预期的格式和要求。 在 el-form 中进行表单校验时，可以通过设置 rules 属性...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值