vue element项目使用 回车键时会页面刷新问题的解决方案
dearweb 发布:2023-04-29 23:14:40阅读:在vue + element项目使用 回车键时会页面刷新问题的解决方案。
场景:
vue项目中 在输入框输入字符并按下回车键搜索时,不会进行搜索, 而是会刷新页面
原因:
当form表单中只有一个input时,按下回车建会自动触发页面的提交功能, 产生刷新页面的行为
解决:
如下代码,在 el-form 中 加个 @submit.native.prevent,就可以了,
@submit: 表单提交
.native 绑定系统原生事件
.prevent 提交以后不刷新页面
代码如下
<el-form :model="goodsListTab.queryParams" ref="queryForm" :inline="true" v-show="true" @submit.native.prevent > <el-form-item label="品名" prop="baseName" > <el-input v-model="goodsListTab.queryParams.baseName" placeholder="请输入品名" clearable size="small" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item> <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery" >搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" >重置</el-button> </el-form-item> </el-form>
小礼物走一波,支持作者
赏还没有人赞赏,支持一波吧