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

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

复制代码
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="110px">
            <el-form-item label="场景名称:" prop="actionName">
                <el-input
                v-model="queryParams.actionName"
                placeholder="请输入名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            
            <el-form-item>
                <el-button type="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>
相关推荐
阿蒙Amon3 小时前
JavaScript学习笔记:4.循环与迭代
javascript·笔记·学习
爱上妖精的尾巴3 小时前
6-3 WPS JS宏 add、delete、size、clear集合成员添加与删除
javascript·wps·js宏·jsa
郑州光合科技余经理3 小时前
海外版生活服务系统源码 | 外卖+跑腿一站式平台技术解析
java·开发语言·javascript·git·spring cloud·php·生活
fruge3 小时前
Lodash 源码精读:防抖节流的实现细节与边界场景
前端
yuzhiboyouye3 小时前
怎么熟悉一个web前端项目的业务呢?
前端
GISer_Jing3 小时前
AI在前端营销和用户增长领域应用(待补充)
前端·人工智能
橘子海全栈攻城狮3 小时前
【最新源码】基于springboot的会议室预订系统设计与实现 014
java·开发语言·前端·spring boot·后端·spring·自动化
1024肥宅3 小时前
前端常用模式:提升代码质量的四大核心模式
前端·javascript·设计模式
哆啦A梦15883 小时前
商城后台管理系统 04,商品添加-清空列表
javascript·vue.js·elementui
哆啦A梦15884 小时前
商城后台管理系统 06,类目选择实现
javascript·vue.js·elementui