问题描述:
当el-form
表单里面只有一个el-input
输入框的时候,在输入框选中时按回车会刷新页面:
<el-form :model="roleQueryParams" ref="roleQueryForm" size="small"
:inline="true" label-width="68px">
<el-form-item label="角色名称" prop="roleName">
<el-input
v-model="roleQueryParams.roleName"
placeholder="请输入角色名称"
clearable
style="width: 250px"
@keyup.enter.native="roleHandleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="roleHandleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="roleResetQuery">重置</el-button>
</el-form-item>
</el-form>
问题分析:
默认情况下,el-form
中只有一个输入框时,el-form
会自动为输入框添加一个type="submit"
的按钮,当按下回车键时,该按钮会触发表单的提交事件。
解决方法:
在el-form标签内加入@submit.native.prevent
即可解决,代码示例:
<el-form :model="roleQueryParams" ref="roleQueryForm" size="small"
:inline="true" label-width="68px" @submit.native.prevent>
<el-form-item label="角色名称" prop="roleName">
<el-input
v-model="roleQueryParams.roleName"
placeholder="请输入角色名称"
clearable
style="width: 250px"
@keyup.enter.native="roleHandleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="roleHandleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="roleResetQuery">重置</el-button>
</el-form-item>
</el-form>