Skip to content

0x066-el-input回车刷新问题

转载
Element UI 中 el-input 按下回车键会刷新页面的原因及解决方法

——————方法1——————

在表单中新增一个元素,使其不显示,目的在于不让 el-input 变成唯一,这样就不会引起刷新。

html
<el-form :model="form" ref="form" :inline="true">
    <el-form-item label="姓名" prop="name" >
        <el-input v-model="form.name" @keydown.enter="handleQuery" />  
  </el-form-item> 
  <div></div>
</el-form>
<el-form :model="form" ref="form" :inline="true">
    <el-form-item label="姓名" prop="name" >
        <el-input v-model="form.name" @keydown.enter="handleQuery" />  
  </el-form-item> 
  <div></div>
</el-form>

——————方法二——————

在 el-form 中 加个 `@submit.native.prevent ``
@submit: 表单提交
.native 绑定系统原生事件
.prevent 提交以后不刷新页面

html
<el-form :model="form" ref="form" :inline="true" @submit.native.prevent>  
  <el-form-item label="姓名" prop="name" >
    <el-input v-model="form.name" @keydown.enter="handleQuery" />  
  </el-form-item>
</el-form>
<el-form :model="form" ref="form" :inline="true" @submit.native.prevent>  
  <el-form-item label="姓名" prop="name" >
    <el-input v-model="form.name" @keydown.enter="handleQuery" />  
  </el-form-item>
</el-form>