问题描述
在需求开发的过程中遇到了一个奇怪的问题:
点击弹窗开启表单,分明没有添加任何键盘事件,但在按下回车键时会让页面自动刷新,因此影响到了其他功能。
产生原因
查阅资料后得知,当 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="handleQuery" />
</el-form-item>
<div></div>
</el-form>
——————方法二——————
在 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="handleQuery" />
</el-form-item>
</el-form>