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