elementUI 中input会默认刷新、跳转的问题

最新推荐文章于 2024-11-07 14:11:51 发布
最新推荐文章于 2024-11-07 14:11:51 发布
阅读量223 收藏
点赞数 3
分类专栏： vue2 项目开发遇到的问题及解决方法 文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59873661/article/details/142488497
版权

 el-form 表单里只有一个 el-input 时，按下回车建会自动触发页面提交功能，因此导致了页面的刷新。

解决方法

——————方法1——————

在表单中新增一个元素，使其不显示，目的在于不让 el-input 变成唯一，这样就不会引起刷新。

——————方法2——————

在 el-form 中 加个 @submit.native.prevent
@submit: 表单提交
.native 绑定系统原生事件
.prevent 提交以后不刷新页面

清清ww
关注
专栏目录
Vue2+ElementUI2开发常见问题
canxuezhang的博客
04-25 1970
Vue2+ElementUI2开发常见问题
Vue2 + element ui 后台管理系统（项目总结）
m0_70851631的博客
05-12 5850
1，准备需要框架，插件，组件库...... Vue框架 （vue2.x版本） Element Ul 组件 axios (网络请求,请求拦截器，响应拦截器) quill（富文本编辑器） echarts（数据可视化工具） 1-1，axios的封装 axios的封装包含了（请求拦截器，响应拦截器，创建的时候设置请求超时时间） 请求拦截器（经常用来设置请求头，用户登录后像后台发送token，这个token可以判断我们是否登录成功） 响应拦截器（做一些token过期处理，还可以对后台返回给我们的状态码
el-input上按回车 界面自动刷新/跳转 问题原因分析及解决办法
weixin_45966674的博客
07-20 1228
是因为el-form一个比较智能的判断 如果表单上只有一个输入框 则在输入框上按回车 表单就会自动提交 且刷新界面老实说 挺奇葩的 这个智能的判断 很多时候都会成为智障 因为大部分人都不需要这个功能 且很多时候会给大家带来问题 这个问题还不容易发现解决办法就是 在el-form 上加上@submit.native.prevent 防止事件冒泡 参考代码如下...
input输入框按回车键后自动刷新页面
Keep_Slience的博客
02-25 4190
最近遇到了一个bug很有意思就想记录下来，就是input输入框在输入完之后按下回车会刷新当前页面。产生这种问题的原因是当form表单只有一个输入框时，按下回车会去提交表单（触发submit事件），按照这个思路可以有下面几种解决办法 在表单内在加一个看不见的input <input style="display:none;" /> 在表单内在加一个看不见的input ...
表单报错项滚动到可视区 scrollIntoView()
xyx107的博客
07-01 217
const firstErrorField = document.querySelector('.nameInput') || this.$refs.nameInput // 获取带有 ref 的第一个表单项。
vue+elementui input框输入值后请求接口，优化为用户输入完成之后再请求
weixin_43643250的博客
10-18 3492
根据项目需求，需要用户输入完之后再请求不会造成资源浪费，于是参考 https://blog.csdn.net/tangkthh/article/details/92679882 有以下方式，实现需求 以此记录一下 <el-input v-model="materialCode" clearable size="small" placehol
element表单内只有一个input回车刷新页面
我的博客
03-10 526
在表单中如果只有一个el-input的话，按回车会刷新页面。 原因：出发了表单提交事件； 解决方法： 一、在 <el-form></el-form> 中添加@submit.native.prevent<el-form @submit.native.prevent></el-form> 二、多加一个表单控件并且添加display:none;样式 ...
Vue使用插件 vue-i18n 实现国际化处理(中英文切换)
weixin_42947516的博客
07-15 1037
Vue使用插件插件 vue-i18n 实现国际化处理安装组件创建对应目录具体文件内容main.js配置创建组件实现语音切换功能表单校验提示信息的中英文切换说明 安装组件 npm install vue-i18n 创建对应目录 在src目录下创建对应文件 具体文件内容 i18n.js import Vue from 'vue' import locale from 'element-ui/lib/locale' import VueI18n from 'vue-i18n' import messages
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
shuux666的博客
03-03 760
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
vue问题记录
qq_36981190的博客
09-16 454
记录遇到的问题，便于后面更深层次的解决问题
element 的 el-form （禁止页面刷新与from验证 vue3）
weixin_44264769的博客
08-23 1691
element 的 el-form （禁止页面刷新与from验证 vue3）
学习笔记：EL表达式 实现数据回显
tanc_Blog
11-04 4050
EL 全名为Expression Language。EL主要作用： 获取数据： EL表达式主要用于替换JSP页面中的脚本表达式，以从各种类型的web域 中检索java对象、获取数据。(某个web域 中的对象，访问javabean的属性、访问list集合、访问map集合、访问数组) 执行运算： 利用EL表达式可以在JSP页面中执行一些基本的关系运算、逻辑运算和算术运算，以在JSP页面
Vue 路由跳转设置不刷新
Passerby_K的博客
10-09 3255
注意： 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用。所以使用keep-alive就是保持组件活跃，不会被destroy销毁掉，就一直还活着，组件没有被销毁掉的话，组件上挂载的数据就还存在，所以状态就可以保留，所以，keep-alive就可以保持组件的状态。
Element UI 中el-input 框回车触发页面刷新问题及解决方案——基础积累
yehaocheng520的博客
04-12 7139
Element UI 中el-input 框回车触发页面刷新问题及解决方案——基础积累
关于elementui el-radio 赋值问题
最新发布
weixin_47194802的博客
11-07 166
也就是说如果你的版本太低，就不能用value，而得用label，于是修改。点击的时候，同时选中。
elementUI table 多级表头隔行变背景颜色
M40153c的博客
10-29 913
如 rowIndex == 0， columnIndex == 1 的意思为多级表头的第一行中的第二列 指在上效果图中。如 rowIndex == 1， columnIndex == 2 的意思为多级表头的第二行中的第三列 指在上效果图中。其中rowIndex == 0 意思为多级表头的第一行，columnIndex == 0 意思为某一行的第一列。
element plus中修改el-table的样式
m0_62317155的博客
11-04 832
element plus中修改el-table的样式
vue3项目中实现el-table分批渲染表格
猫晨的技术小屋
11-02 644
vue3项目中实现el-table分批渲染表格。
elementui中input判断中英文
06-02
Element UI 中的 Input 组件可以通过设置 `pattern` 属性来限制用户输入的内容。如果想限制用户只能输入英文或中文，可以使用以下正则表达式： - 只能输入中文：`/^[\u4e00-\u9fa5]+$/` - 只能输入英文：`/^[a-zA-Z...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值