问题

　　在 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. [兼容]——IE 8 常见兼容性问题

    接触了一个PC端网页开发的项目,要求兼容到IE 8,遇到不少坑,在这里记录下: 1.IE8 的兼容性视图 bug描述:IE8有许多新更新,但微软为了兼容以前的IE浏览器,提出了"兼容性视图& ...

  2. jdbc连接2(不可以注入)

    public void login1(String username, String password) throws ClassNotFoundException, SQLException { / ...

  3. crop和resize操作区别

    crop:对图像进行剪切 resize:对图像进行伸缩 实践代码 import cv2 bb2d = [30, 30, 72 ,42] image = cv2.imread('car.png') pt ...

  4. SQL Server数据库——数据库的数据导出与数据导入

    http://jingyan.baidu.com/article/3c48dd34531d5de10be358b8.html

  5. EJB3 jpa 数据库表的映射关系

    1)多对一映射关系(单向) 使用外键关联,在外键的选取上以多的一方为主,即外键要在多的一方体现出来 @Entity public class Company implements Serializab ...

  6. ActiveMQ-在Centos7下安装和安全配置

    环境准备: JDK1.8 ActiveMQ-5.11 Centos7 1.下载Linux版本的ActiveMQ: $ wget http://apache.fayea.com/activemq/5.1 ...

  7. 按照Right-BICEP要求对实验二进行测试

    我的代码实现的功能很简单,在最基本的功能上,包括有无括号(0/1),有无负数(0/1),有无乘除法(0/1)验证程序的正确性,测试用例为8个,2^3个,也就覆盖了所有的代码路径. 测试计划: 基本功能 ...

  8. PMP备考指南之相关事项介绍

    本文已同步至 GitHub/Gitee/公众号,感兴趣的同学帮忙点波关注~ PMP是当今IT.通信.建筑.等高新技术行业的热门资格认证,无论是技术升级管理,还是管理者的能力提升,都离不开PMP的理论体 ...

  9. docker网络之macvlan

    macvlan接口类型简单说类似于子接口,但相比子接口来说,macvlan接口拥有自己独立的mac地址,因此使用macvlan接口可以允许更多的二层操作.macvlan有四种模式:VEPA,bridg ...

  10. mongodb-导出数据到csv文件或json文件

    在mongodb的bin目录下, 有一个mongoexport, 可用于数据的导出 [wenbronk@localhost bin]$ ./mongoexport --help Usage: mong ...