vue + element ui 阻止表单输入框回车刷新页面

问题

　　在 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>

转载于:https://www.cnblogs.com/yuxiaole/p/9323069.html

vue + element ui 阻止表单输入框回车刷新页面相关推荐

html5 前端动态加载后端,Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）...
vue+element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 elementui官网引导关键配置 template中,form和form-item的写法和绑定 data里的 ...
vue 添加完数据后刷新页面_vue form 表单提交后刷新页面的方法
最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数 ...
不使用Ajax，如何实现表单提交不刷新页面
不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...
php阻止form提交表单提交,防止表单提交时刷新页面-阻止form表单的默认提交行为...
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
问卷调查：vue element动态生成表单、表单校验以及表单提交
有任何疑问和问题欢迎大家提出来,一起学习,相互监督,共同进步! 需求:题型包含:单选题.多选题.文本框.矩阵题型实现功能的相关技术:vue(router,axios,element-ui) 实现结果 ...
Element UI进行表单校验的时候，输入正确内容后，还有提示问题
问题:表单中输入正确的内容后,还提示请输入内容部分代码如下: // 表单 <el-dialog title="添加用户" :visible.sync="dialo ...
form表单提交不刷新页面的方法
方法1:给form表单加onsubmit事件,值为return false; <form action="" method="post" οnsubmi ...
Element UI自定义表单验证公共提取
2019独角兽企业重金招聘Python工程师标准>>> 主要代码: util文件夹下validate.js 文件 export const VDT = {messages:{requ ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...

vue + element ui 阻止表单输入框回车刷新页面

问题

解决方案

测试

vue + element ui 阻止表单输入框回车刷新页面相关推荐

最新文章

热门文章