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. Jq /Js 拖动选择文件

    必须先引入 Jquery 依赖 1.文件结构 2. HTML <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  2. 安装pytorch-gpu的经验与教训

    首先说明 本文并不是安装教程,网上有很多,这里只是自己遇到的一些问题 我是以前安装的tensorflow-gpu的,但是发现现在的学术论文大部分都是用pytorch复现的,因此才去安装的pytorch ...

  3. centos搭建neo4j环境(含java)2021_12

    限centos neo4j与java下载: 链接:https://pan.baidu.com/s/1ei15dROGy3OwJfbislxH7g 提取码:8B3A   下载后 1.在linux中建立文 ...

  4. webpack 中 loader 和 plugin 的区别

    通俗点讲loader是转换,plugin是执行比转换更复杂的任务,比如合并压缩等 loader:让webpack能够处理非js文件,然后你就可以利用 webpack 的打包能力,对它们进行处理. 例如 ...

  5. Angular基础之ngFor遍历对象数组获取key和value渲染页面的几种方法

    Angular的ngFor遍历对象数组的几种方法 方法一 ts文件: export class MyDemo {   objectKeys = Object.keys;   myObj = { a: ...

  6. HashMap存储自定义类型键值-Linked Hash集合

    HashMap存储自定义类型键值 练习∶每位学生(姓名,年龄)都有自己的家庭住址.那么,既然有对应关系,则将学生对象和家庭住址存储到map集合中.学生作为键,家庭住址作为值.注意,学生姓名相同并且年龄 ...

  7. freeswitch号码黑名单

    概述 freeswitch是一款简单好用的的VOIP开源软交换平台. 在客户的呼叫过程中,会遇到一些异常的号码,包括高投诉风险号码.敏感号码.特殊号码等. 在客户呼叫流程中,需要针对这些异常号码做呼叫 ...

  8. Java JDK1.5: 泛型 新特性的讲解说明

    Java JDK1.5: 泛型 新特性的讲解说明 每博一文案 听到过这样一句话:"三观没有标准.在乌鸦的世界里,天鹅也有罪." 环境.阅历的不同,造就了每个人独有的世界观.人生观. ...

  9. Node.js学习笔记----day05(MongonDB详情)

    认真学习,认真记录,每天都要有进步呀!!! 加油叭!!! 一.es6中的find() 方法的原理 EcmaScript 6 对数组新增了很多方法 比如,find find 接收一个方法作为参数,方法内 ...

  10. 安装云崽Bot+GPT3插件

    安装云崽Bot+GPT3插件 这次我们来搭建云崽Bot,云崽Bot其实是一个用于原神的机器人,不过众多大佬开发出了很多有趣的插件供我们使用,这次我们就是用其中的一个插件Chat-gpt(其不是正宗的C ...