el-dialog内嵌表单项，使用enter键后页面直接刷新

最新推荐文章于 2024-04-10 17:00:42 发布
最新推荐文章于 2024-04-10 17:00:42 发布
阅读量939 收藏 1
点赞数
分类专栏： 开发中遇到的问题 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37755267/article/details/125767295
版权

背景：使用el-dialog，弹框内嵌了个表单，input输入框使用到了enter，发现按下enter键后页面直接刷新了。

解决方案：加了个el-form-item，但让他隐藏

<el-form-item style="display: none">
    <el-input v-mode="form.labelVal" />
</el-form-item>

 

生活的打工仔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
element UI组件库el-dialog内程序刷新el-dialog内组件方法
09-15 3575
element UI组件库el-dialog内程序刷新el-dialog内组件方法
VUE------element框架 Form表单中回车事件出现页面刷新问题解决
xyy1234567891的博客
03-19 689
问题描述：在给输入框添加回车事件时，发现一按回车，页面就刷新了。怀疑是form表单的原因，经查询，是由于当form表单只有一个文本框时，按下回车将会触发表单的提交事件， 导致页面的刷新。 解决办法：在el-from 加上 @submit.native.prevent如下代码： <el-dialog title="请输入要添加的节点" :visible.sync="dialogAddVis...
vue项目刷新当前页面的三种方法
12-01
想必大家在刨坑vue的时候也遇到过下面情形：比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种： 如果希望点击确定的时候，Dialog 对话框关闭的时候，当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下 那么表格的数据可以重新加载，Dialog 对话框设置的数据可以在确定后刷新出现在页面上 这时候我们最直接的思维就是想到下面这种： 但是，试过的会发现用vue-router重新路由到当前页面，页面是不进行刷新的，根本没有任何作用~所以这个方法out！ 下面我这边整理几种可圈可点的三种方式，大家可以自行的选择：
elementUi嵌套表单的dialog，输入完成按enter键，重新刷新页面，该如何解决？
qq_46602557的博客
03-05 2834
elementUi嵌套表单的dialog，输入完成按enter键，重新刷新页面，该如何解决？ <template> <div> <span>{{defaultName}}</span> <el-button @click="showDialog=true">编辑</el-button> <el-dialog :visible="showDialog"
elementui dialog 回车时却刷新整个页面
carbonzhao的专栏
01-09 912
使用el-dialog弹出一个表单，当我无意间敲到回车键时，整个页面被刷新了，又是一脸的懵逼。到处都是坑，这个坑填完另一个坑还在等你。坑坑相连，坑坑不同。经过查找文档发现解决方案为上述截图标记。
ElementUI/ ElementUI PLUS el-dialog包含el-form查询时回车导致刷新整个页面问题
陈小白
04-25 786
只需要给表单添加一个@submit.native.prevent 提交拦截触发时间。
VUE el-dialog 缓存 不刷新 第二次之后 不执行created()
zhang8907xiaoyue的博客
10-01 2473
解决方案：增加v-if窗口关闭判断，v-if=false会销毁dialog v-if="orderOpen" <el-dialog :title="orderTitle" :visible.sync="orderOpen" v-if="orderOpen" width="80%" append-to-body> <pageOrder :param="orderSn"></pageOrder> </el-dialog> ...
element ui 对话框el-dialog关闭事件详解
08-27
首先，`el-dialog` 的基本使用方式是在 Vue 模板中创建一个 `el-dialog` 标签，并设置相应的属性。例如： ```html <el-dialog title="标题" :visible.sync="bind" size="small" @close='closeDialog'></el-dialog> ...
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
【Vue】el-dialog 弹窗以及重刷新代码写法
weixin_50223520的博客
10-24 1389
el-dialog 弹窗以及重刷新代码写法
el-dialog中的回车事件
最新发布
weixin_45535843的博客
04-10 361
由于需求登录回车后需要弹出弹框输入谷歌验证码，于是有了回车事件不生效的问题。这个只存在于普通的页面当中，比如登录中的按钮。弹窗中的回车事件需要在dialog上加事件。
el-dialog嵌套表单使用【回车】问题
shihezhengshz的博客
09-18 1243
被提到这个bug的时候，我就是这种状态 讲道理，第一次遇到这么怪的事儿，幸好一个同事遇到过这问题，太怪了； 具体问题： 打开el-dialog嵌套表单，给el-input聚焦，然后回车，直接刷新页面 问题原因：我el-form里面只有一个el-input，具体为什么回车变成那样也不晓得了 解决方法，加个el-input，设置隐藏 以上~ ...
ElementUI el-dialog包含el-form查询时回车导致刷新整个页面问题
LEON_RAY
12-28 1278
view-design 查询表单只有一个Input框回车导致刷新整个页面，路由后出现?。也是这个问题。
el-dialog的内容不刷新；el-dialog内容有缓存；el-dialog里面的组件不刷新问题；
i_am_a_div的博客
10-25 3097
el-dialog的内容不刷新；el-dialog内容有缓存；el-dialog里面的组件不刷新问题；
element弹出框的表单输入框回车页面刷新解决方案
CHENC0518的博客
07-04 474
1.当我在使用Element进扫码枪录入时，发现当一个表单中的input起到回车事件时，页面会刷新。3.input中使用以下代码监听回车事件和使得聚焦。4.为input绑定ref，使用以下完成聚焦。
VUE element-ui 解决表单enter事件会刷新页面
NeverGiveUp_Up的博客
07-22 789
VUE element-ui 解决表单enter事件会刷新页面
关于el-dialog作为子窗口，修改/添加后刷新父窗口数据表格，然后立即隐藏子窗口，造成父窗口表格刷新数据不稳定问题的解决
dugucike的专栏
04-18 942
子窗口完成添加/编辑数据后保存并立即执行刷新父窗口数据表格和窗口隐藏函数，导致父窗口数据刷新，时而成功，时而不成功问题的解决
ElementUI常用问题积累
QQ_852213985
03-28 1028
1. el-dialog包含el-form，回车查询时，页面刷新 <el-form @submit.native.prevent></el-form> 2. el-input 多层嵌套 无法输入的问题 <el-input v-model="name" @input="oninput"></el-input> oninput() { this.$forceUpdate(); }, 未完待续… ......
el-dialog内嵌el-form
07-29
在 el-dialog 内嵌 el-form 的场景下，可以通过以下步骤来实现： 1. 在 el-dialog 的内容中添加 el-form 组件，例如： ```html <el-dialog> <el-form> <!-- 表单内容 --> </el-form> </el-dialog> ``` 2. 在 el-form 中添加需要的表单项，例如输入框、下拉框等。可以使用 el-form-item 包裹每个表单项，以便设置表单项的样式和校验规则，例如： ```html <el-dialog> <el-form> <el-form-item label="用户名"> <el-input></el-input> </el-form-item> <el-form-item label="密码"> <el-input type="password"></el-input> </el-form-item> </el-form> </el-dialog> ``` 3. 根据需要，在 el-dialog 中添加确定和取消按钮，以便提交或取消表单内容。可以使用 el-button 组件来创建按钮，例如： ```html <el-dialog> <el-form> <!-- 表单内容 --> </el-form> <span slot="footer"> <el-button>取消</el-button> <el-button type="primary">确定</el-button> </span> </el-dialog> ``` 这样，你就可以将 el-dialog 和 el-form 结合起来，在 el-dialog 内嵌 el-form，实现一个包含表单项的弹窗组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

生活的打工仔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值