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

产生的原因

　　当 el-form 表单里只有一个 el-input 时，按下回车建会自动触发页面提交功能，因此导致了页面的刷新

 

解决方法

　　解决方法1

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

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

 

　　解决方法2

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

<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.native="query" />
　　</el-form-item>
</el-form>