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>
相关推荐
索木木11 分钟前
ShortCut MoE模型分析
前端·html
MXN_小南学前端21 分钟前
Vue3 + Spring Boot 工单系统实战:用户反馈和客服处理的完整闭环(提供gitHub仓库地址)
前端·javascript·spring boot·后端·开源·github
轮子大叔34 分钟前
CSS基础入门
前端·css
踩着两条虫34 分钟前
强强联合!VTJ.PRO 正式接入 DeepSeek V4,AI 编码能力再跃升
前端·vue.js·ai编程
Lily.C43 分钟前
DOMPurify 前端富文本 XSS 防护使用指南
前端
一叶渡江1 小时前
深挖 iOS 16 以下 flex column-reverse 滚动失效问题
前端
众创岛1 小时前
回调函数、闭包概念、场景及python实战
前端
im_AMBER1 小时前
Leetcode 160 最小覆盖子串 | 串联所有单词的子串
开发语言·javascript·数据结构·算法·leetcode
得想办法娶到那个女人1 小时前
项目中 TypeScript 类型推导 极简实战总结
前端·javascript·typescript
Beginner x_u1 小时前
前端八股整理(Vue 02)|组件通信、生命周期、v-if 与 v-show
前端·javascript·vue.js