开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >使用elementUI的el-form组件进行查询时，当输入框仅有一项时，回车自动提交表单，浏览器会刷新页面

使用elementUI的el-form组件进行查询时，当输入框仅有一项时，回车自动提交表单，浏览器会刷新页面

作者头像

py3study

发布于 2021-04-19 08:36:54

发布于 2021-04-19 08:36:54

2K00

代码可运行

举报

文章被收录于专栏：python3python3

运行总次数：0

代码可运行

一、概述

项目中有一个父子组件，子组件是dialog弹窗，第一次点击保存后，页面自动刷新。

父组件操作的表单数据都丢失了，但是再刷新一次，重新操作就不会刷新了，非常奇怪。

原因：由于当表单只有一个文本框时，按下回车将会触发表单的提交事件，从而导致页面刷新。

<el-form :inline="true" :model="getForm" class="demo-form-inline">
    <el-form-item label="科目名称">
        <el-input v-model.trim="getForm.exam_name" @keyup.enter.native="search"></el-input>
    </el-form-item>
</el-form>

二、解决方案

在 el-from 加上 @submit.native.prevent

<el-form :inline="true" :model="getForm" class="demo-form-inline" @submit.native.prevent>
    <el-form-item label="科目名称">
        <el-input v-model.trim="getForm.exam_name" @keyup.enter.native="search"></el-input>
        　　
    </el-form-item>
</el-form>

本文参考链接：

https://my.oschina.net/u/4417839/blog/3691313

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/04/15 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

鹅厂写码13年，我总结的程序员高效阅读方法论

进程，线程，协程 - 你了解多少？

微服务与分布式系统设计看这篇就够了！

腾讯文档表格卡顿指标探索之路

从Hadoop1.0到Hadoop2.0架构的优化和发展探索详解

微服务架构：由浅入深带你了解底层注册中心

关于vue按回车时刷新页面问题-已解决

form native submit 表单解决方案

最近使用vue开发遇到了一个有趣的问题，页面文本框在点击回车时会刷新页面，而且只有第一次会触发刷新，问题代码如下：

星辰sea

2022/10/29

1K0

搞定：el-form el-form-item 下input框回车刷新整个页面

事件 el form input 表单

🤞解决el-form el-form-item 下input框回车刷新整个页面🤞

知识浅谈

2024/05/25

2780

管理系统类毕设(三)---学生信息查询实现(包括前后端以及分页的实现)

容器 spring javascript node.js vue.js

用到了Element的面包屑表格表单下拉菜单开关组件 Element官网 Element官网

代码哈士奇

2021/01/26

1.1K0

管理系统类毕设(三)---学生信息查询实现(包括前后端以及分页的实现)

总结form表单的三种封装方法（Vue+ElementUI）

form formdata input model 表单

第一种方法简单明了，基本能够处理解决大多数的表单问题，并且与slot的完美组合，已经可以达到我们的需求要求。

用户2323866

2021/06/24

8.3K0

element-ui 常用组件技巧总结

blur element input native ui

好久不写文章了，做个element-ui的总结，会持续更新 element-ui的table列超出部分省略加悬浮提示

李维亮

2021/07/08

5600

与 AI 共创：实现回车键自动登录功能

腾讯技术创作特训营S12#AI进化论项目实战

最近，在开发一个 Vue.js 项目时，遇到了一个需求：在登录表单中，用户输入完用户名和密码后，按下回车键即可自动触发登录功能。听起来很简单，但实现过程中却经历了一些小波折。今天，我就来分享一下这段与 AI 共创的经历，既有失败的无奈，也有成功的喜悦！😅🎉

肥晨

2025/03/17

1030

Elementui实战知识点随记

编程算法 java element ui

1. Elementui实战知识点随记 1.1. 表单验证对于复杂数据，类似于对象里面包含数组，每个数组又包含多个对象，表单验证我查看了网上很多资料都说Elementui不支持，实际上，经过我官网的查看，是有解决办法的，地址如下 https://element.eleme.cn/#/zh-CN/component/form 找到动态增减表单项这一项核心如下 <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-wi

老梁

2019/09/10

8460

ElementUI——elementui2.0表格支持render渲染

行业渲染 el render 表格

当前项目基于vue2.0+elementui来实现的，所以简单封装一个表格支持render函数来自定义渲染；

思索

2024/08/15

1230

ElementUI——elementui2.0表格支持render渲染

Vue后台管理系统-前端登录设计

登录后台前端设计重定向

在做后台管理系统时，登录模块是必不可少的，访模块看似简单，在开发涉及到许多细节，一般来说主要有以下这些：

越陌度阡

2023/05/01

6150

Vue后台管理系统-前端登录设计

设计Element UI表单组件居然如此简单！

腾讯技术创作特训营S11#重启人生

上文讲解了Jest框架对组件库测试，TypeScript和Jest都为代码质量和研发效率。之前实现Container和Button组件以渲染功能为主，可根据不同属性渲染不同样式去实现布局和不同格式的按钮。

JavaEdge

2024/12/29

3510

设计Element UI表单组件居然如此简单！

el-upload组件使用

ref="upload"：给这个元素一个引用名，方便在Vue实例中通过this.$refs.upload访问。

用户4396583

2024/09/05

1260

前端表单输入框自动填充和覆盖逻辑的实现

前端前端框架腾讯技术创作特训营S7 element ui 表单

你好，我是喵喵侠。在Web开发中，动态表单的联动操作，是非常常见的需求，尤其是在需要实现复杂逻辑时，更是不可或缺。正好我在工作中，好几次遇到了输入框内容需要被填充的需求，本文将会为你详细介绍这样的需求案例，展示具体实现的思路和实战代码。

喵喵侠

2024/06/20

7653

前端表单输入框自动填充和覆盖逻辑的实现

ElementUI——vue2+element-ui 2.x的动态表格和表单

el element ui 表单表格

一个基于vue2.x + element-ui 2.x版本的项目，里面都是CURD的东西，但是前人并未封装组件，而是直接CV，现在要新增一个大模块的功能，就想着封装个组件，后面再基于这个组件对老项目进行改造；

思索

2024/08/15

1910

ElementUI——vue2+element-ui 2.x的动态表格和表单

ElementUI快速入门

javascript vue.js jquery ui 网站 element ui

在执行完npm run dev后发现浏览器自动打开了vue-admin-template登录页面，点击登录，此时模板页面就搭建好了。

Java架构师必看

2021/05/14

3.2K0

测试平台开发(二) 高逼格登录页面

vue.js javascript html

怎么样？哎哟，不错哦。本文就带大家一起用 Vue + Element-UI 把这个不错的登录页面开发出来。

dongfanger

2020/11/04

1.2K0

测试平台开发(二) 高逼格登录页面

Vue + Element UI 实现权限管理系统前端篇（十四）：菜单功能实现

腾讯云测试服务

菜单功能实现菜单接口封装菜单管理是一个对菜单树结构的增删改查操作。提供一个菜单查询接口，查询整颗菜单树形结构。 http/modules/menu.js 添加 findMenuTree 接口。 import axios from '../axios' /* * 菜单管理模块 */ // 保存 export const save = (data) => { return axios({ url: '/menu/save', method: 'post'

朝雨忆轻尘

2019/06/18

2K0

使用 Spring Boot + Redis + Vue 实现动态路由加载页面

腾讯技术创作特训营S8

在现代 Web 应用开发中，动态路由加载能够显著提升应用的灵活性和安全性。本文将深入探讨如何利用 Spring Boot、Redis、Element UI 和 Vue 技术栈实现动态路由加载，并通过 Redis 生成和验证有效链接以实现页面访问控制。我们将从技术选型、环境搭建、代码实现以及应用场景等方面进行详细讲解。

繁依Fanyi

2024/07/28

3280

【摸鱼神器】UI库秒变低代码工具——表单篇（一）设计

编程算法 json https 网络安全

表单是很常见的需求，各种网页、平台、后台管理等，都需要表单，有简单的、也有复杂的，但是目的一致：收集用户的数据，然后提交给后端。

用户1174620

2022/06/30

2.4K0

【摸鱼神器】UI库秒变低代码工具——表单篇（一）设计

vue-admin-chart实现管理后台登陆页面，axios请求restful接口，Composition API风格

vue.js element ui 云 API 网站混合云解决方案

vue-admin管理后台的登陆部分已完成，代码已上传到github和gitee，供大家clone或下载zip

程序猿视觉

2022/06/30

5810

vue-admin-chart实现管理后台登陆页面，axios请求restful接口，Composition API风格

VueblogServer项目短信验证码登录功能前端实现

验证码短信网站 vue.js javascript

上次我在本人的公众号上发了一篇后端Spring Security认证框架下实现手机短信验证码登录功能的文章手把手带你在集成SpringSecurity的SpringBoot应用中添加短信验证码登录认证功能，但是用户不可能通过调用接口去认证，只会是在前端页面通过点击按钮来登录认证，这就涉及前端功能的实现及与后端接口的联调了。

用户3587585

2022/04/14

1.5K0

VueblogServer项目短信验证码登录功能前端实现

相关推荐

关于vue按回车时刷新页面问题-已解决

更多 >

LV.0

这个人很懒，什么都没有留下～

作者相关精选

目录

一、概述

二、解决方案

加入讨论

的问答专区 >

1TDP会员擅长3个领域

相关课程

一站式学习中心 >

AI绘画-StableDiffusion图像生成

大模型图像创作引擎

高性能应用服务

社区富文本编辑器全新改版！诚邀体验～

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验