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>
相关推荐
柳杉20 分钟前
使用AI从零打造炫酷医疗数据可视化大屏,源码免费拿!
前端·javascript·数据可视化
凌云拓界28 分钟前
前端开发的“平衡木”:在取舍之间找到最优解
前端·性能优化·架构·前端框架·代码规范·设计规范
zhengfei6111 小时前
【XSS payload 】一个经典的XSS payload
前端·xss
简单Janeee1 小时前
[Vue 3 从零到上线]-第四篇:组件化思维——把网页像积木一样拆解
javascript·vue.js·ecmascript
全栈老石2 小时前
手写一个无限画布 #1:坐标系的谎言
前端·canvas
XW01059992 小时前
4-11判断素数
前端·python·算法·素数
J2虾虾2 小时前
Spring Boot中使用@Scheduled做定时任务
java·前端·spring boot
Heo2 小时前
深入React19任务调度器Scheduler
前端·javascript·面试
一枚前端小姐姐3 小时前
Vue3 + Pinia 状态管理,从入门到模块化
前端·vue.js
boooooooom3 小时前
Vue3 nextTick 实现大变化:微任务优先,彻底搞懂渲染时机!
javascript·vue.js·面试