El problema de la actualización de la página provocada por la entrada y el retorno de carro en ElementUI y su solución

En el proceso de desarrollo diario, es posible que encuentre un problema: en el formulario el-form de ElementUI, si solo hay un cuadro de entrada el-input, cuando ingresa un valor y presiona Entrar, la página se actualizará. Esto se debe a que cuando solo hay un cuadro de entrada en el elemento del formulario, al presionar Intro se activará el evento de envío predeterminado del formulario, que está estipulado por el estándar W3C.

Solución:

ElementUI también da una solución. Si desea evitar este comportamiento predeterminado, puede <el-form>agregarlo a la etiqueta @submit.native.prevent. Por ejemplo:

<el-form 
  :model="form" 
  ref="form" 
  label-width="200px" 
  class="form" 
  @submit.native.prevent
>
  <el-form-item
    label="姓名"
    prop="name"
  >
    <el-input v-model.number="form.name"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submit('form')">提交</el-button>
    <el-button @click="reset('form')">重置</el-button>
  </el-form-item>
</el-form>

Sin embargo, el método anterior solo evita el comportamiento predeterminado, si aún necesita ingresar para enviar el formulario, puede resolverlo mediante los siguientes métodos:

<el-form 
  :model="form" 
  ref="form" 
  label-width="200px" 
  class="form" 
  @submit.native.prevent="() => submit('form')"
>
  <el-form-item
    label="姓名"
    prop="name"
  >
    <el-input v-model.number="form.name"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" native-type="submit">提交</el-button>
    <el-button @click="reset('form')">重置</el-button>
  </el-form-item>
</el-form>

Tenga en cuenta los siguientes puntos:

• Asegúrese de usar @submit.native.preventpara bloquear el evento nativo, el método de ejecución es el evento de clic del botón de búsqueda
• El botón de búsqueda debe estar envuelto en forma electrónica.
• Eliminar el evento de clic del botón de búsqueda
• Asegúrate de agregar native-type="submit"el atributo

Además, la entrada única del formulario de formulario original y el problema de actualización de retorno de carro de entrada electrónica del paquete de formulario también se pueden resolver.Existen los siguientes métodos:

1. Agregue un cuadro de entrada oculto en el formulario, puede definir el campo de entrada oculto a través de oculto u ocultarlo a través del estilo CSS.

2. Elimine el evento de retorno de carro del cuadro de entrada (según los requisitos, algunos requieren el evento de retorno de carro para enviar un formulario para consultar o realizar otras operaciones, este método no es aplicable).

3. Impedir el evento de envío predeterminado del formulario. Por ejemplo, use el controlador onsubmit para devolver falso para evitar el evento de envío predeterminado de una entrada dentro de un formulario nativo.

---

Para ayudar a todos a comprender mejor y resolver este problema, puede consultar la solución oficial de ElementUI para este problema, la dirección de código abierto es:

https://github.com/ElemeFE/element/blob/a0e82aa8ac58d68e66992a5632b779a901436879/examples/docs/zh-CN/form.md

Espero que estos métodos puedan ayudarlo a resolver el problema de la actualización de la página provocada por la entrada y el retorno de carro en ElementUI. Si tiene más preguntas o necesita ayuda adicional, no dude en preguntar.