欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 焦点 > element中input框添加@keyup.enter.native,按enter后刷新页面

element中input框添加@keyup.enter.native,按enter后刷新页面

2024/12/22 6:57:49 来源:https://blog.csdn.net/weixin_58495461/article/details/144537102  浏览:    关键词:element中input框添加@keyup.enter.native,按enter后刷新页面

按enter键本来是调用搜索接口,但却是刷新了整个页面

 <el-form:model="queryParams"ref="queryForm"size="small":inline="true"v-show="showSearch"label-width="68px"@submit.native.prevent><el-form-item label="员工名称" prop="userName"><el-inputv-model="queryParams.userName"placeholder="请输入员工名称"clearable@keyup.enter.native="handleQuery"/></el-form-item><el-form-item><el-buttontype="primary"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>

原因:form 表单中只有一个输入框,在输入框中按下回车就是提交该表单,且会刷新页面。阻止这一默认行为,可以 在 form 标签上添加
@submit.native.prevent就可以解决刷新整个页面的问题。

<el-form :model="queryParams"  label-width="110px" @submit.native.prevent>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com