解决form表单提交刷新问题

最新推荐文章于 2025-04-22 13:24:27 发布

原创最新推荐文章于 2025-04-22 13:24:27 发布 · 7.5k 阅读

3 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

157 篇文章

订阅专栏

在Vue+Element UI中，当表单只有一个输入框时，回车默认会提交表单导致页面刷新。通过在el-form上添加@submit.native.prevent属性可以阻止表单的默认提交行为，从而防止页面刷新。测试显示，无论是一输入框还是多输入框，加上此属性都能有效避免回车提交问题。

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

如果button不设置 type='button'

问题

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

解决方案

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

测试

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

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

new Vue({

el: "#app",

data: {

form : {

}

});

</script>

</body>

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

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

new Vue({

el: "#app",

data: {

form : {

}

});

</script>

</body>

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

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

new Vue({

el: "#app",

data: {

form : {

}

});

</script>

</body>