问题
在 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
时间： 2024-10-11 17:32:47