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>
相关推荐
网络点点滴2 分钟前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
运维咖啡吧4 分钟前
周一才上线的网站,单单今天已经超过1000访问了
前端·程序员·ai编程
世界哪有真情7 分钟前
用虚拟IP扩容端口池:解决高并发WebSocket端口耗尽问题
前端·后端·websocket
前端世界7 分钟前
打造一个可维护、可复用的前端权限控制方案(含完整Demo)
前端
LeQi13 分钟前
当!important成为代码毒瘤:你的项目是不是也中了招?
前端·css·程序员
玲小珑14 分钟前
Next.js 教程系列(九)增量静态再生 (ISR):动态更新的静态内容
前端·next.js
Mintopia23 分钟前
B 样条曲线:计算机图形学里的 “曲线魔术师”
前端·javascript·计算机图形学
前端小巷子26 分钟前
跨域问题解决方案:CORS(跨域资源共享)
前端·网络协议·面试
大大。26 分钟前
van-tabbar-item选中active数据变了,图标没变
java·服务器·前端
Mintopia29 分钟前
Three.js 3D 世界中的噪声运动:当数学与像素共舞
前端·javascript·three.js