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>
相关推荐
小小码农Come on6 分钟前
QPainter双缓冲区实现一个简单画图软件
linux·服务器·前端
nunumaymax8 分钟前
【第三章-react 应用(基于 react 脚手架)】
前端·react.js·前端框架
空中海10 分钟前
第一章:Vue 基础与模板语法
前端·javascript·vue.js
mCell15 分钟前
为什么我不建议初学者一上来就用框架学 Agent
javascript·langchain·agent
每天吃饭的羊24 分钟前
水平,垂直居中
前端·javascript·html
亿牛云爬虫专家36 分钟前
告别空壳HTML!Node.js + Playwright + 代理IP 优雅抓取动态网页实战
node.js·html·爬虫代理·动态网页·数据抓取·代理ip·playwright
鼎道开发者联盟1 小时前
鼎享会 | OpenClaw Control UI 前端架构全解析:自研 UI 对接 Server 实操指南
前端·ui·架构·openclaw·control ui
尘世中一位迷途小书童1 小时前
一套完整的给予ceium封装的组件库,可满足企业级开发
前端
Z_Wonderful1 小时前
微前端:Webpack 配置 vs Vite 配置 超清晰对比
前端·webpack·node.js
thankseveryday1 小时前
Three.js 把 Blender 绘制的曲线(Bezier / 曲线) 导入 Three.js 并作为运动路径 / 动画路径使用
开发语言·javascript·blender