element 表单input回车刷新页面解决办法

旧巷幽草{香

已于 2022-03-10 18:01:12 修改

阅读量574

点赞数 3

分类专栏： element_ui vue.js 文章标签： vue.js javascript elementui

于 2022-03-10 10:30:19 首次发布

本文链接：https://blog.csdn.net/qq_38181746/article/details/123394988

版权

vue.js 同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

element_ui

19 篇文章 0 订阅

订阅专栏

"在Element UI中遇到一个问题，当用户在表单输入框内按回车键时，页面会意外刷新。解决这个问题的方法是在`el-form`标签上添加`@submit.native.prevent`事件修饰符，这将阻止表单的默认提交行为。示例代码如下：

摘要由CSDN通过智能技术生成

element 表单input回车刷新页面解决办法

在开发页面的时候，进行表单查询，点击输入框然后按下回车会刷新页面

解决办法：
一. 在el-form标签中添加@submit.native.prevent<el-form @submit.native.prevent> 在这里插入图片描述
代码：

<el-form ref="searchItem" :model="searchItem" :inline="true" @submit.native.prevent>
     <el-form-item label="" prop="videoName">
            <el-input v-model="searchItem.searchName" @keyup.enter.native="handleQuery" placeholder="请输入视频名称" clearable size="small" style="width: 240px" />
     </el-form-item>
     <el-form-item>
           <el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
           <el-button size="mini" type="success" @click="resetQuery">刷新</el-button>
            <el-button size="mini" @click="resetQuery">重置</el-button>
     </el-form-item>
</el-form>