表单元素的默认提交行为

W3C中规定，当一个form元素中只有一个输入框（<input> 或 <textarea> ）时，在该输入框中按下回车应该提交该表单。<el-form>表单组件中 @keyup.enter 事件导致页面刷新通常是因为表单元素的默认提交行为未被阻止。

解决方案

1. 阻止表单默认提交（推荐）

如果 <el-input> 在 <form> 标签内，添加 @submit.prevent 处理表单提交事件：

<template>
  <form @submit.prevent> <!-- 关键：阻止表单默认提交 -->
    <el-input 
      v-model="queryParams.title" 
      placeholder="请输入计划名称" 
      clearable 
      @keyup.enter="handleQuery" 
    />
    <el-button type="primary">搜索</el-button>
  </form>
</template>

2. 使用 .prevent 修饰符

如果不在表单内，直接在 @keyup.enter 后添加 .prevent 修饰符 或 在事件处理函数中调用 event.preventDefault()：

<!-- 方法1 -->
<el-input 
  v-model="queryParams.title" 
  placeholder="请输入计划名称" 
  clearable 
  @keyup.enter.prevent="handleQuery" <!-- 关键：阻止默认事件 -->
/>

<!-- 方法2-->
const handleQuery = (event) => {
  event.preventDefault(); // 阻止默认行为
  // 处理查询逻辑
};

3. 明确按钮类型

确保表单中的按钮类型为 button（而非默认的 submit）：

<el-button type="primary" native-type="button">搜索</el-button> <!-- 明确指定为普通按钮 -->

4. 如果使用了 element-plus <el-form>，需要在 <el-form> 上添加 @submit.native.prevent：

<el-form @submit.native.prevent>
  <el-form-item label="计划名称">
    <el-input v-model="queryParams.title" @keyup.enter="handleQuery" />
  </el-form-item>
</el-form>

@submit.native.prevent 和 @submit.prevent 的区别是什么？

在 Vue 中，@submit.native.prevent 和 @submit.prevent 的区别主要涉及 事件绑定对象 和 组件封装特性。

核心区别

特性	@submit.prevent	@submit.native.prevent
绑定对象	自定义组件（如 <el-form>）的 submit 事件	原生 HTML 标签（如 <form>）的 submit 事件
触发条件	组件内部通过 $emit('submit') 触发	原生表单元素的提交事件（如按 Enter 键）
适用场景	自定义组件（如 Element Plus 的 <el-form>）	普通 HTML 表单（<form>）

详细解释

1. @submit.prevent

• 作用对象 ：自定义组件（如 <el-form>）。

• 事件来源 ：组件内部通过 $emit('submit') 主动触发的事件。

• 示例：

  <!-- 自定义组件 FormComponent.vue -->
  <template>
    <form @submit.prevent>
      <button @click="$emit('submit')">提交</button> <!-- 手动触发 submit 事件 -->
    </form>
  </template>
  
  <!-- 使用自定义组件 -->
  <FormComponent @submit="handleSubmit" />

2. @submit.native.prevent

• 作用对象 ：原生 HTML 标签（如 <form>）。

• 事件来源 ：浏览器内置的表单提交行为（如按下 Enter 键、点击 <button type="submit">）。

• 示例：

  <form @submit.native.prevent="handleSubmit">
    <input type="text" />
    <button type="submit">提交</button> <!-- 触发原生 submit 事件 -->
  </form>

Element Plus 组件的特殊处理

Element Plus 的 <el-form> 是一个封装组件，其内部包含原生 <form>。因此：

• 阻止原生表单提交 ：使用 @submit.native.prevent。
• 监听表单验证后的提交 ：使用 @submit（需配合 el-form 的 :model 和 :rules）。

<el-form 
  :model="formData" 
  :rules="rules" 
  @submit.native.prevent <!-- 阻止原生提交 -->
  @finish="handleFinish" <!-- 监听验证后的提交 -->
>
  <el-form-item prop="username">
    <el-input v-model="formData.username" />
  </el-form-item>
  <el-button type="primary" native-type="submit">提交</el-button>
</el-form>

为什么需要 .native 修饰符？

Vue 组件会屏蔽原生事件，因此：

• 普通组件 ：使用 @click 监听自定义事件，使用 @click.native 监听原生事件。
• 表单组件 ：使用 @submit.native 监听原生表单提交事件。

总结

• @submit.prevent ：用于监听和阻止 自定义组件 内部触发的 submit 事件。
• @submit.native.prevent ：用于监听和阻止 原生表单元素 的提交事件（如 Enter 键、提交按钮）。