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. Windows下Mariadb中文乱码问题

    win10 在命令行使用Mariadb出现无法插入中文 并且之前正确插入的中文也无法正常显示了 ERROR 1366 (22007): Incorrect string value: '\xB1\xB ...

  2. PKUSC2022 润摆寄

    Day 0 模拟赛的题目竟是 寄 摆 润!预示着我的 PKUSC. Day 1 猜中主角(指九条可怜)原来都是芳文厨 看错时间以为考 \(5h\),于是告诉自己 优势在我可以慢慢做. T1 很显然的 ...

  3. uniapp 开发微信小程序问题笔记

    最近接手了一个小程序开发,从头开始.使用了 uniapp 搭建,以前没有做过小程序开发,着手看文档.查文档.一步一步完成了任务的开发.特此记录开发过程中的问题. 开发建议: 使用 HBuilderX ...

  4. 聚合查询、分组查询、ORM中如何给表再次添加新的字段、F与Q查询、ORM查询优化、ORM事务操作、ORM常用字段类型、ORM常用字段参数、Ajax、数据编码格式(Content-Type)、ajax携带文件数据

    今日内容 聚合查询 在ORM中支持单独使用聚合函数,需要使用aggregate方法. 聚合函数:Max最大.Min最小.Sum总和.Avg平均.count统计 from django.db.model ...

  5. 图文并茂quasar2.6+vue3+ts+vite创建项目并引入mockjs,mockjs 拦截ajax请求的原理是什么,quasar为什么要使用boot?

    每天都要开心(▽)哇: 首先呢,我们来创建项目 执行下面命令,开始创建项目啦 $ npm i -g @quasar/cli $ npm init quasar 下面是我的选项,仅供参考哇 √ What ...

  6. vue-3 this概念

    一.this概念 官方是这样说的: 在 setup()内部,this 不会是该活跃实例的引用 因为 setup() 是在解析其它组件选项之前被调用的,所以 setup() 内部的 this 的行为与其 ...

  7. web应用开发模式、API接口、接口测试工具postman

    web应用开发模式.API接口.接口测试工具postman web开发模式 前后端混合开发模式 前后端混合开发模式是指前后端代码混合,所有的HTML代码和数据在服务器端拼接好,一次性将内容发送到客户端 ...

  8. 增加for循环-泛型的概念

    增加for循环 增强for循环(也称for each循环)是JDK1.5以后出来的一个高级for循环,专门用来遍历数组和集合的.它的内部原理其实是个lterator迭代器,所以在遍历的过程中,不能对集 ...

  9. Dijkstra算法详解(朴素算法+堆优化)

    定义 Dijkstra(读音:/'daɪkstrə/)算法,是用来求解一个边带权图中从某个顶点出发到达其余各个顶点的最短距离的算法.(为表达简便,下文中"起点(源点)到某个顶点的距离&quo ...

  10. 11月21日内容总结——多进程实现TCP服务端并发、互斥锁、线程及代码实现、GIL全局解释器锁、信号量、event事件、进程池和线程池、协程

    目录 一.多进程实现TCP服务端并发 二.互斥锁代码实操 1.互斥锁的概念 2.互斥锁的使用 3.死锁现象 4. 小结 三.线程理论 进程 线程 线程简介 为什么要使用多线程? 多线程概念 多进程的优 ...