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. [编程基础] Python对象的浅拷贝与深拷贝笔记

    Python中的赋值语句不创建对象的副本,它们只将名称绑定到对象.对于不可变的对象,这通常没有什么区别.但是对于处理可变对象或可变对象的集合,您可能需要寻找一种方法来创建这些对象的"真实副本 ...

  2. Socket爬虫:Python版

    简述:较为底层的爬虫实现,用于了解爬虫底层实现的具体流程,现在各种好用的爬虫库(如requests,httpx...等)都是基于此进行封装的. PS:本文只作为实现请求的代码记录,基础部分不做过多阐述 ...

  3. 梯度下降算法 Gradient Descent

    梯度下降算法 Gradient Descent 梯度下降算法是一种被广泛使用的优化算法.在读论文的时候碰到了一种参数优化问题: 在函数\(F\)中有若干参数是不确定的,已知\(n\)组训练数据,期望找 ...

  4. spark RPC超时造成任务异常 Attempted to get executor loss reason for executor id 17 at RPC address 192.168.48.172:59070, but got no response. Marking as slave lost.

    日志信息如下 Attempted to get executor loss reason for executor id 17 at RPC address 192.168.48.172:59070, ...

  5. 探讨下如何更好的使用缓存 —— Redis缓存的特殊用法以及与本地缓存一起构建多级缓存的实现

    大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 通过前面的文章,我们一起剖析了Guav ...

  6. 工作这么多年,我总结的数据传输对象 (DTO) 的最佳实践

    前言 数据传输对象 (DTO) 是一种设计模式,常用于软件开发不同层或者不同系统之间传输数据.DTO 的主要目的是封装数据并防止它被其他层或系统直接访问或修改.通过遵循一组最佳实践,开发人员可以确保他 ...

  7. 洛谷 P1478 陶陶摘苹果(升级版) 题解

    这道题只要会自定义cmp恰当地进行排序,其他部分没有什么大问题. 上代码: 1 #include<bits/stdc++.h> 2 using namespace std; 3 int n ...

  8. 字符串拼接输出-Predicate接口

    字符串拼接输出 下面的字符串数组当中存有多条信息,请按照格式""\姓名∶XX.性别:xx."的格式将信息打印出来.要求将打印姓名的动作作为第一个Consumer 接口的L ...

  9. Quartz.Net 官方教程 Tutorial 1/3(Jobs 和 Trigger)

    根据官网说明 类型 概述 IScheduler 调度类核心接口 IJob 独立实现业务逻辑需要继承的任务接口 IJobDetail 给任务接口定义实例的任务说明类接口 ITrigger 触发器,设置何 ...

  10. 【随笔记】T507 Android10 EC200U-CN 4G Cat1 移植

    基本信息 硬件信息 硬件平台:T507 (Android 10 Linux 4.9) 模组型号:EC200U-CN(Cat1)(展讯芯片) 相关文件 代理提供 longan/kernel/linux- ...