vue的写法就是el-form上添加阻止默认事件 @submit.native.prevent

<el-form
ref="queryForm"
label-width="120px"
:model="form"
:rules="rules"
:show-message="false"
size="mini"
@submit.native.prevent
>
</el-form>

 项目中使用的是jsx的语法,修改为

return (
<el-form
{...{
class: "", // ofxh
on: {
input: noop, },
nativeOn:{//监听事件
submit: handlePrevent //阻止事件
},
props: {
model: this.formData,
rules: rules,
inline: this.inline,
disabled: this.disabled,
"label-position": this.labelPosition,
"label-width": this.labelWidth,
"label-suffix": this.labelSuffix,
"validate-on-rule-change": false
},
ref: "form",
key: "form"
}}
>
{formItemList}
{this.$slots.inline}
</el-form>
); 阻止事件
const handlePrevent=function(event){event.preventDefault()};

  

 

element+Vue el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面的更多相关文章

  1. 用layui的 form.on提交表单如何禁止刷新页面

    答:只需要在 form.on里面的底部添加return false;即可 例如: form.on('submit(component-form-demo1)', function(data){ var ...

  2. form表单下的button按钮会自动提交表单的问题

    form表单下的button按钮会自动提交表单的问题 2017年01月05日 18:02:44 蓝色水 阅读数:18012更多 个人分类: asp.net   form表单下的按钮在没有指定type类 ...

  3. 如果没有<form>标签,也没有enctype="multipart/form-data"属性,怎么使用formData对象提交表单呢?如下方式

    form标签的enctype属性 enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码. 默认地,表单数据会编码为 "application/x-www-form-urlen ...

  4. form中的button按钮在IE11中自动提交表单问题导致弹出框关闭之后表单被重置

    最近几天,测试系统,遇到一个兼容性问题,form中有一个button按钮,没有指定type类型,点击按钮弹出框选择值之后回填给form上的一个单行文本框,在IE6.IE7.IE8.IE9.IE10中测 ...

  5. 使用 elementUI 的表单进行查询,表单中只有一个文本框时,回车会自动触发表单的提交事件,导致页面的刷新。

    使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面: 原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新. ...

  6. 回车禁止form提交表单

    今天遇到回车自动提交表单特此记录下 document.getElementsByTagName('form')[0].onkeydown = function(e) { var e = e || ev ...

  7. SpringMVC(十四):SpringMVC 与表单提交(post/put/delete的用法);form属性设置encrypt='mutilpart/form-data'时,如何正确配置web.xml才能以put方式提交表单

    SpringMVC 与表单提交(post/put/delete的用法) 为了迎合Restful风格,提供的接口可能会包含:put.delete提交方式.在springmvc中实现表单以put.dele ...

  8. form表单action提交表单,页面不跳转且表单数据含文件的处理方法

    在最近的项目中需要将含 input[type='file']的表单提交给后台 ,并且后台需要将文件存储在数据库中.之前所用的方法都是先将文件上传到七牛服务器上,然后七牛会返回文件的下载地址,在提交表单 ...

  9. 阻止form元素内的input标签回车提交表单

    <form></form>标签内input元素回车会默认提交表单. 阻止回车默认提交表单: $('form').on('keydown', function (event) { ...

  10. 解析:使用easyui的form提交表单,在IE下出现类似附件下载时提示是否保存的现象

    之前开发时遇到的一个问题,使用easyui的form提交表单,在Chrome下时没问题的,但是在IE下出现类似附件下载时提示是否保存的现象. 这里记录一下如何解决的.其实这个现象不光是easyui的f ...

随机推荐

  1. .Net引用根目录子文件夹下的dll文件

    在.Net开发的时候,有时候会引用一套库,这些库是由多个dll文件.正常情况下,这些dll文件需要拷贝到运行根目录下.如果这些dll文件比较多,加上其他直接引用的dll,这样会导致根目录下非常乱.我们 ...

  2. Spark详解(01) - Scala编程语言

    Spark详解(01) - Scala编程语言概述 Scala官网:https://www.scala-lang.org/ 什么是Scala 从英文的角度来讲,Scala并不是一个单词,而是Scala ...

  3. python进阶之路13 二分法 三元表达式 各种生成式 匿名函数

    算法简介及二分法 1.什么是算法 算法就是解决问题的有效方法 不是所有的算法都很高效也有不合格的算法 2.算法应用场景 推荐算法(抖音视频推送 淘宝商品推送) 成像算法(AI相关)...... 几乎涵 ...

  4. [LeetCode]杨辉三角 II

    题目 代码 class Solution { public: vector<int> getRow(int rowIndex) { vector<int> array(rowI ...

  5. .NET周报【1月第4期 2023-01-28】

    由于微信公众号排版问题,建议大家在PC端浏览. 国内文章 C# 很少人知道的科技 https://blog.lindexi.com/post/C-很少人知道的科技.html 本文来告诉大家在C#很少有 ...

  6. java 进阶P-2.3+P-2.4

    封闭的访问属性 private 封装:把数据和对数据的操作放在一起. (所谓封装就是把数据和对这些数据的操作放在一个地方,通过这些操作把这些数据保护起来,别人不能直接接触到这些数据) 1 privat ...

  7. Spring在Filter中记录Web请求Request和返回Response的内容及时长

    1 简介 在Spring MVC中,我们有时需要记录一下请求和返回的内容,方便出现问题时排查.比较Header.Request Body等.这些在Controller也可以记录,但在Filter中会更 ...

  8. drf-day7——认证组件、权限组件、频率组件、过滤排序、分页

    目录 一.认证组件 1.1 登录接口 1.2 认证组件使用步骤 1.3 整体代码 1.4认证时cookie的获取方式 二.权限组件 2.1需求分析: 2.2 权限的使用 2.3代码 三.频率组件 3. ...

  9. drf-day6——九个视图子类、视图集、路由系统、认证组件

    目录 一.九个视图子类 二.视图集 2.1 通过ModelViewSet编写5个接口 2.2 通过ReadOnlyModelViewSet编写2个只读接口 2.3 ViewSetMixin源码分析 总 ...

  10. drf-day2——restful规范、序列化反序列化、基于django编写五个原生接口、drf介绍和快速使用、cbv源码分析

    目录 一.restful规范(重要,不难) 概念 十个规范 二.序列化反序列化 三.基于django原生编写5个接口 四.drf介绍和快速使用 概念 安装 代码 五.cbv源码分析 六.作业 1.使用 ...