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>
相关推荐
~废弃回忆 �༄3 分钟前
CSS中绝对定位
前端·css·css中绝对定位
best66614 分钟前
Monorepo 全解析:概念、价值、选择与实践(Vue3方式)
前端·架构
Eliauk__19 分钟前
Vue 事件绑定深入解析:@click="func" vs @click="func()"
前端·vue.js·面试
用户214118326360227 分钟前
dify案例分享-deepseek赋能从 Excel 表格到统计图,一键生成代码不是梦
前端
Winwin28 分钟前
老帅 Webpack 和新将 Vite 的 PK
前端·前端工程化
best66634 分钟前
预检请求是什么?
前端
一袋米扛几楼9834 分钟前
【JavaScript 】1. 什么是 Node.js?(JavaScript 服务器环境)
服务器·javascript·node.js
前端加油站35 分钟前
单元测试入门与进阶
前端·单元测试
前端付杰40 分钟前
第八节: 全面理解vue3: 工具函数的核心作用与使用方法
前端·javascript·vue.js
Mr_sun.41 分钟前
Node.js与VUE安装
前端·vue.js·node.js