使用element-ui表单,点击回车查询时,页面重新刷新加载的问题
代码:
<el-form :model="queryParams" ref="queryForm" label-width="68px">
<el-form-item label="展示名称" prop="showName">
<el-input
v-model="queryParams.showName"
placeholder="请输入展示名称"
clearable
size="mini"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
</el-form>
原因:
当表单中只有一个输入框的时候,按下回车键会触发表单提交事件,从而导致页面刷新
解决方案:
在el-form
标签上写入@submit.native.prevent
@submit.native.prevent
.native 表示对一个组件绑定系统原生事件
.prevent 表示提交以后不刷新页面
<el-form :model="queryParams" ref="queryForm" label-width="68px" @submit.native.prevent>
<el-form-item label="展示名称" prop="showName">
<el-input
v-model="queryParams.showName"
placeholder="请输入展示名称"
clearable
size="mini"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
</el-form>