element ui中el-input绑定回车事件后，点击回车后会刷新页面

最新推荐文章于 2025-06-26 15:22:25 发布

原创最新推荐文章于 2025-06-26 15:22:25 发布 · 541 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

element ui 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了在Vue中使用Element UI组件库时，遇到el-form表单仅有一个el-input元素时会自动触发提交的问题。解决方案是在el-form标签上添加@submit.native.prevent事件修饰符，以防止表单的默认提交行为。通过这种方法，可以确保表单提交由点击按钮触发，而不是由单一输入字段的变化引发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

出现这个问题的原因是：当 el-form 表单中只显示出来一个 el-input 时会触发表单的提交事件所以会出现这个问题！

解决方法就是给： el-form 添加 @submit.native.prevent 就可以阻止表单提交行为！

如下：

<el-form @submit.native.prevent :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="年龄"
    prop="age"
    :rules="[
      { required: true, message: '年龄不能为空'},
      { type: 'number', message: '年龄必须为数字值'}
    ]"
  >
    <el-input v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
  </el-form-item>
</el-form>