本文主要是介绍ElementPlus 或ElementUI搜索框添加回车监听刷新列表，结果回车后刷新了整个页面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
ElementPlus 或ElementUI搜索框添加回车监听刷新列表，结果回车后刷新了整个页面
一、场景
今天在项目中遇见一个bug，在此做记录，给大家提供思路。
搜索栏进行搜索时，回车键本应该刷新数据列表，结果整个页面被刷新。
二、网上答案
在搜索栏中，如果只有一个<el-input>组件时，回车键会刷新整个页面。查看代码发现确实只有一个<el-input>组件。项目搜索部分代码如下：
<el-form :model="queryParams" ref="queryForm" label-width="100px" @submit.native.prevent><el-row :gutter="16"><el-col :md="6"><el-form-item label="名称" prop="dictLabel"><el-inputv-model="queryParams.dictLabel"placeholder="请输入名称"clearable@keyup.enter="handleQuery"/></el-form-item></el-col><el-col :md="6" align="right" style="margin-left: auto;"><el-form-item class="search_btn_box"><el-button class="filter-item" type="primary" @click="handleQuery">搜索</el-button><el-button class="filter-item" style="margin-left: 8px;" @click="resetQuery">重置</el-button></el-form-item></el-col></el-row></el-form>
三、实测解决方案
在<el-form>组件处添加@submit.native.prevent，参考上述代码。
VUE2，VUE3应该都是一样的，我这里用的是ElementPlus+VUE3
四、个人见解
@submit.native.prevent是阻止表单默认提交事件，当只有一个<el-input>组件，回车键会默认提交表单。
本来以为是事件的冒泡引起，后来尝试发现不是。
这篇关于ElementPlus 或ElementUI搜索框添加回车监听刷新列表，结果回车后刷新了整个页面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
