el-form表单回车提交，浏览器会刷新页面

最新推荐文章于 2024-05-15 16:33:32 发布
最新推荐文章于 2024-05-15 16:33:32 发布
阅读量810 收藏
点赞数
文章标签： elementui javascript html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuhui_Tong/article/details/123275183
版权

使用el-form组件进行查询时，当输入框仅有一项时，回车提交表单，浏览器会刷新页面…

原因：由于当表单只有一个文本框时，按下回车将会触发表单的提交事件， 从而导致页面刷新
解决方法：在 el-from 加上 @submit.native.prevent

<el-form ref="searchForm" :model="searchForm" @submit.native.prevent>
小童Rachel
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于输入框按回车自动刷新页面的4个解决方案
逆风的蔷薇
02-02 1207
解决方案 1、直接去除掉form表单，当然这是最简单粗暴的方法。 2、如果一个input会自动提交，那么比较容易想到的是再加一个input。值得注意的是 这里的input不能设置type为hidden，这样一样是不生效的，form一样会认为只有一个input。需要设置成<input type="text" class="form-control" style="display:none">。 3、给input加上回车事件直接return false。在input加上οnkeydο...
el-form回车会刷新页面
huai42717的博客
10-13 750
el-form回车会刷新页面
解决vue element ui中表单回车事件会刷新页面问题
dhjsksks的博客
02-23 214
需要在form标签加上。
el-form 中单个 el-input 框回车刷新问题
zluz_的博客
04-11 319
el-form 中单个 el-input 框回车刷新问题
关于el-form中的el-input回车自动刷新页面
茶荼
09-07 651
上传代码回车执行handleSearch方法的时候会自动刷新页面。表单元素，回车事件就不会自动刷新，可以给其中一个。input设置display:none。1.如果el-form-item里面。2.给el-form的设置。
解决 el-form 回车触发刷新页面
柒个橙子的博客
10-26 497
当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。 解决办法是在 <el-form> 上添加 @submit.native.prevent 属性 <el-form @submit.native.prevent></el-form>
el-form回车页面刷新
一名女程序猿的博客
06-17 728
由于当表单只有一个文本框时，按下回车将会触发表单的提交事件， 导致页面的刷新。 解决方法1： 加一个隐藏的文本框，即表单不只有一个文本框 <el-form-item style="margin-bottom:0;display:none;"> <el-input></el-input> </el-form-item> 解决方法2： 阻止form的enter(回车键)事件 <el-form @submit.native.prevent> &
el-form 输入框回车会自动提交的问题
chenxiyuxiao的博客
10-11 1672
1、问题描述及触发条件 当el-form中 有且只存在一个input时 在这个input中回车会触发默认提交事件，可能会改变网址，导致在地址中的参数发生改变造成报错。 另：注意是只存在有一个input时，才会触发，其中el-date，el-select底层都是input，存在el-input和el-select、el-date时不会触发，存在el-input、el-checkbox-button时则会触发。 2、解决方法 在el-form中添加@submit.native.prevent阻止表单默..
点击回车时页面自动刷新 解决方法
赵氏天儿的博客
04-25 1160
描述 在做搜索功能时，一个搜索文本框，一个搜索按钮，为文本框添加了回车事件，在文本框输入并敲击回车，出现搜索结果后页面自动刷新——因为只有一个文本框在form表单中，点击回车，则提交了表单，刷新了界面。 解决方法 将form表单改为div。 在form表单中再添加一个文本框，可以设置其为隐藏，这样点击enter回车事就不会刷新页面了。因为一个表单下，如果只有一个文本框时，按下回车将会触发表单的提交事件。 如下： <input type=“text” style=“display:none” /&gt
el-form 多层级表单的实现示例
10-14
主要介绍了el-form 多层级表单的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue element el-form多表单验证.txt
09-17
在使用element-ui，想要多个表单同时验证时，可以使用promise的方法进行异步验证取得结果后再进行操作
el-form表单-解决按下回车页面刷新
m0_65039133的博客
06-12 613
刷新原因：在element-ui中，el-form中只有一个el-input时，按下回车会刷新页面。解决办法：给el-form添加@submit.native.prevent属性。
elementui el-form 回车页面刷新事件
yun_hou的博客
07-02 4804
问题描述：在提交某项业务时，需要输入一次密码，点击下方确定后提交，但是当el-input有焦点时，按下回车会发生页面刷新事件，url中的参数也被清空。 代码如下： <div class="password ft12"> <el-form> <el-form-item label="签约密码：" label-width="95px" prop="pas...
el-form含输入框,选择框上传按钮, 支持回车提交表单
MADAO123_的博客
05-22 494
上传word文件
el form 监听回车事件
qq_43327840的博客
07-21 942
回车监听
elementui el-form 默认不支持回车提交，怎么解决
Shelly Long的博客
12-06 1849
概念： 1.在表单的提交按钮上添加 Vue 原生属性native-type="submit"可以让按钮变为表单提交按钮； 2.阻止表单默认提交事件（默认是阻止），在表单上（即<el-form>标签上）添加@submit.native.prevent即可 3.因为el-form默认不支持表单回车提交，在表单上（即<el-form>标签上）添加@keyup.ent...
vue2人力资源项目9权限管理
最新发布
weixin_63298649的博客
05-15 305
给表格绑定数据，添加 row-key和default-expand-all和默认展开节点属性。2.visible加.sync可以让我们点击x直接关闭弹层。这里用了文档里的方法，通过获取实例调用方法来实现双向绑定。用插槽和v-if设置二级权限没有添加。1.设置控制退出角色的显示的变量。调用接口，传入参数，提示信息。将获取的数据转换为树形。
el-form表单嵌套el-form
09-08
可以使用`el-form`表单组件嵌套另一个`el-form`表单组件。这种嵌套可以用于更复杂的表单布局和组织。 以下是一个示例代码，演示了如何嵌套`el-form`表单： ```vue <template> <el-form ref="outerForm" :model="outerForm" label-width="100px"> <el-form-item label="外层表单项"> <el-input v-model="outerForm.field1"></el-input> </el-form-item> <el-form ref="innerForm" :model="innerForm" label-width="100px"> <el-form-item label="内层表单项"> <el-input v-model="innerForm.field2"></el-input> </el-form-item> </el-form> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { outerForm: { field1: '' }, innerForm: { field2: '' } }; }, methods: { submitForm() { this.$refs.outerForm.validate((validOuterForm) => { if (validOuterForm) { // 外层表单校验通过 this.$refs.innerForm.validate((validInnerForm) => { if (validInnerForm) { // 内层表单校验通过，提交数据 console.log(this.outerForm); console.log(this.innerForm); } else { // 内层表单校验不通过 return false; } }); } else { // 外层表单校验不通过 return false; } }); } } }; </script> ``` 在上面的示例中，外层表单和内层表单都使用了`el-form`组件，并且分别定义了自己的数据模型（`outerForm`和`innerForm`）。你可以根据实际需要添加更多的表单项。 请注意，在提交表单时，需要先校验外层表单的有效性，然后再校验内层表单的有效性。只有当两个表单都校验通过时，才会提交数据。 希望这个例子对你有所帮助！如果你还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值