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>
相关推荐
irises几秒前
从零实现2D绘图引擎:4.矩形与文本的实现
前端·数据可视化
前端_逍遥生1 分钟前
Vue 2 vs React 18 深度对比指南
前端·vue.js·react.js
irises2 分钟前
从零实现2D绘图引擎:2.Storage和Painter的实现
前端·数据可视化
juma90022 分钟前
最近在搞PCS储能双向变流器的Simulink仿真时踩了不少坑,尤其是功率控制环的配合调试简直让人头秃。咱们直接打开仿真模型,先从系统架构开始盘
javascript
irises5 分钟前
从零实现2D绘图引擎:3.交互系统(Handle)的实现
前端·数据可视化
feiyangqingyun8 分钟前
Qt/C++地图最简示例/在线离线切换/地图视图切换/执行各种js函数交互
javascript·c++·qt
irises9 分钟前
从零实现2D绘图引擎:1.实现数学工具库与基础图形类
前端·数据可视化
葡萄城技术团队10 分钟前
SpreadJS 自定义函数实战指南:从入门到避坑
前端
m0_7400437317 分钟前
v-bind 和 v-model 的核心区别
前端·javascript·vue.js
集成显卡20 分钟前
AI取名大师 | 使得 uni-app 兼容 vue3 同名简写语法糖的 vite 插件
javascript·vue.js