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>

最近更新

  1. TCP协议是安全的吗?

    2024-06-08 19:48:08       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-08 19:48:08       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-08 19:48:08       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-08 19:48:08       20 阅读

热门阅读

  1. Python | 开房门(map)

    2024-06-08 19:48:08       6 阅读
  2. hash和history路由模式的区别

    2024-06-08 19:48:08       7 阅读
  3. 深入Vue.js:从基础到进阶的全面学习指南

    2024-06-08 19:48:08       11 阅读
  4. 2024年BCSP-X小学高年级组初赛真题解析

    2024-06-08 19:48:08       11 阅读
  5. Unity学习笔记---音视频播放

    2024-06-08 19:48:08       8 阅读
  6. 不明确的unicode字符

    2024-06-08 19:48:08       6 阅读
  7. iptables常用命令总结

    2024-06-08 19:48:08       10 阅读
  8. 启山智软助力企业数字化转型

    2024-06-08 19:48:08       4 阅读