【Vue3 + Element Plus】Form表单按下Enter键导致页面刷新问题

Komorebi゛2025-12-30 12:07

问题描述

Form表单按下Enter键导致页面刷新，是浏览器的默认行为所导致的，要避免这种情况，可以通过阻止默认的提交行为来禁止页面刷新。

解决方法

使用@submit.prevent修饰符来阻止表单的默认提交行为

html 复制代码

<el-form ref="ruleFormRef" inline :model="ruleForm" :rules="rules" label-width="120px" @submit.prevent>
  <el-form-item label="分组名称" prop="name">
    <el-input v-model="ruleForm.name" style="width: 300px" placeholder="请输入分组名称" />
  </el-form-item>
</el-form>