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>
相关推荐
lerhxx9 分钟前
AI 应用中的上下文管理 —— 从"上下文窗口"到"分层压缩"的工程实践
前端·javascript
骑着蜗牛撵大象32716 分钟前
多 Agent 分治协作:MapReduce 模式下的并行扇出与结果归并
前端
用户553182973218 分钟前
Flutter iOS 热更新深入 Dart VM:读懂函数入口、解释执行与调用桥接
前端
前端snow26 分钟前
为什么大厂要用Postgres + mogodb的框架?
前端
运维有小邓130 分钟前
2026年主流AD域管理软件有哪些?
前端
Mahut31 分钟前
我在 Mac 上做了个本地剪辑器
javascript·架构·产品
Mickey同学32 分钟前
提示词注入:AI 时代的「SQL 注入」
前端
deli00734 分钟前
GROUP BY 先别想当然:我把 SQL 分组语义做成了沙盘,8 个实验 + 27 条自检全绿
前端
WayneX35 分钟前
开源 Vue 3 组件库 Morya UI:把组件、文档、AI 工具链一起做进一个包
前端·vue.js·前端框架
用户157415681653435 分钟前
页面白屏 + Invalid prop: type check failed for prop "options"?原来是 script setup 的 ref
前端