Element UI 中el-input 框回车触发页面刷新问题及解决

问题描述

当el-input 获取焦点后按到回车按钮会刷新当前页面

 <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
	<el-form-item label="关键字">
		<el-input v-model.trim="queryParams.keyword" placeholder="请输入" clearable></el-input>
	</el-form-item>
	<el-form-item class="el-btn-box">
		<el-button class="el-btn-search" type="primary" icon="custom-icon-search" size="mini" @click="handleQuery" :loading="loading">查询</el-button>
	</el-form-item>
</el-form>

问题解决

在el-form标签增加表单事件@submit.native.prevent,防止搜索框回车键刷新整个页面

 <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" @submit.native.prevent>
	<el-form-item label="关键字">
		<el-input v-model.trim="queryParams.keyword" placeholder="请输入" clearable></el-input>
	</el-form-item>
	<el-form-item class="el-btn-box">
		<el-button class="el-btn-search" type="primary" icon="custom-icon-search" size="mini" @click="handleQuery" :loading="loading">查询</el-button>
	</el-form-item>
</el-form>