问题

　　在 vue+element ui 中只有一个输入框（el-input）的情况下，回车会提交表单。

解决方案

　　在 el-form 上加上 @submit.native.prevent 这个则会阻止表单回车提交。

测试

下面的代码出现表单回车提交

<body>

<div id="app">

    <el-form ref="form" :model="form" label-width="80px">

        <el-form-item label="活动名称">

            <el-input v-model="form.name"></el-input>

        </el-form-item>

    </el-form>

</div>

<!-- 引入组件库 -->

<script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript">

    new Vue({

        el: "#app",

        data: {

            form : {

            }

        }

    });

</script>

</body>

下面的代码不会出现回车表单提交：el-form 中加上@submit.native.prevent

<body>

<div id="app">

    <el-form ref="form" :model="form" label-width="80px" @submit.native.prevent >

        <el-form-item label="活动名称">

            <el-input v-model="form.name"></el-input>

        </el-form-item>

    </el-form>

</div>

<!-- 引入组件库 -->

<script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript">

    new Vue({

        el: "#app",

        data: {

            form : {

            }

        }

    });

</script>

</body>

下面的代码也不会出现回车表单提交：使用两个 el-input

<body>

<div id="app">

    <el-form ref="form" :model="form" label-width="80px">

        <el-form-item label="活动名称">

            <el-input v-model="form.name"></el-input>

        </el-form-item>

        <el-form-item label="即时配送">

            <el-input v-model="form.delivery"></el-input>

        </el-form-item>

    </el-form>

</div>

<!-- 引入组件库 -->

<script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript">

    new Vue({

        el: "#app",

        data: {

            form : {

            }

        }

    });

</script>

</body>

vue + element ui 阻止表单输入框回车刷新页面的更多相关文章

  1. vue+element ui 重置表单

    <el-dialog :title="addForm.title" :visible.sync="dialogFormVisible" width=&qu ...

  2. Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）

    Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...

  3. 不使用Ajax，如何实现表单提交不刷新页面

    不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...

  4. 防止表单提交时刷新页面-阻止form表单的默认提交行为

    最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...

  5. element ui form表单清空规则

    公司项目重构,经过商定使用element ui.在重构项目的时候发现一下element ui上很蛋疼的东西. 例如,这个form表单就是一个.趁着在高铁上没事,把想写的东西写一下. 先说一下eleme ...

  6. 封装Vue Element的form表单组件

    前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...

  7. element ui FORM表单

    form表单 Form-Item Slot [label] 旧版语法 <el-form-item label="活动名称" prop="name"> ...

  8. layer,Jquery,validate实现表单验证，刷新页面，关闭子页面

    1.表单验证 //获取父层 var index = parent.layer.getFrameIndex(window.name); //刷新父层 parent.location.reload(); ...

  9. form表单提交不刷新页面的方法

    方法1:给form表单加onsubmit事件,值为return false; <form action="" method="post"  onsubmi ...

随机推荐

  1. jzoj4724

    DJL为了避免成为一只咸鱼,来找czgj学习Fibonacci数列. 通过czgj的谆谆教导,DJL明白了Fibonacci数列是这样定义的: F(1)=1;F(2)=1;F(n)=F(n-1)+F( ...

  2. Django(图书管理系统2)

    day64 内容回顾     1. ORM外键操作         图书表和出版社表  多对一 的关系              # 书     class Book(models.Model):   ...

  3. 初识PHP之php运行流程及原理(一)

    初识PHP一.用脚本命令行运行php(1)打开cmd.exe(winkey+R)(2)找到php.exe(拖进cmd即可)(3)输入命令php.exe -f "文件实际路径"注:运 ...

  4. XorPay.com 支付平台介绍【免费申请个人微信支付接口】

    XorPay 支付平台介绍 XorPay 定位为个人 / 独立开发者 / 个体户 / 小微企业提供安全.简单.稳定.正规的收款服务.目前支持微信 NATIVE / JSAPI / 收银台 / 小程序 ...

  5. Swift 使用 #warning

    swift 中没法使用#Warning来提示警告, 可以通过给TODO: FIXME:加上警告, 实现类似的效果. Build Phases ---> Run Script ---> ad ...

  6. Distributed PostgreSQL on a Google Spanner Architecture – Query Layer

    转自:https://blog.yugabyte.com/distributed-postgresql-on-a-google-spanner-architecture-query-layer/ Ou ...

  7. 剑指offer五十六之删除链表中重复的结点

    一.题目 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处理后 ...

  8. 【链表】Odd Even Linked List

    题目: Given a singly linked list, group all odd nodes together followed by the even nodes. Please note ...

  9. 数据分析--降维--LDA和PCA

    一.因子分析 因子分析是将具有错综复杂关系的变量(或样本)综合为少数几个因子,以再现原始变量和因子之间的相互关系,探讨多个能够直接测量,并且具有一定相关性的实测指标是如何受少数几个内在的独立因子所支配 ...

  10. R语言运算符

    运算符是一个符号,它告诉编译器执行特定的数学或逻辑操作. R语言丰富的内置运算符,并提供以下类型的运算符. 运算符类型 在R编程中有以下类型的运算符 - 算术运算符 关系运算符 逻辑运算符 赋值运算符 ...