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>
相关推荐
AiXed1 小时前
PC微信WDA算法
前端·javascript·macos
博客zhu虎康2 小时前
React+Ant design
javascript·react.js·ecmascript
一只小阿乐6 小时前
react 封装弹框组件 传递数据
前端·javascript·react.js
533_6 小时前
[element-plus] el-tree 动态增加节点,删除节点
前端·javascript·vue.js
禁止摆烂_才浅6 小时前
前端开发小技巧-【JavaScript】- 获取元素距离 document 顶部的距离
前端·javascript·react.js
wshzd6 小时前
LLM之Agent(二十九)|LangChain 1.0核心组件介绍
前端·javascript·langchain
程序猿_极客7 小时前
Vue 2脚手架从入门到实战核心知识点全解析(day6):从工程结构到高级通信(附代码讲解)
前端·javascript·vue.js·vue2学习笔记
q***71857 小时前
海康威视摄像头ISUP(原EHOME协议) 摄像头实时预览springboot 版本java实现,并可以在浏览器vue前端播放(附带源码)
java·前端·spring boot
一只小阿乐7 小时前
vue3 使用v-model开发弹窗组件
javascript·vue.js·elementui
web加加7 小时前
vue3 +vite项目页面防f12,防打开控制台
前端·javascript·vue.js