关于el-dialog中@close事件和取消确认按钮并用，会触发两次关闭表单的操作（！表单为子组件时）

最新推荐文章于 2025-04-18 10:15:13 发布
最新推荐文章于 2025-04-18 10:15:13 发布
阅读量4.2k 收藏 1
点赞数 7
分类专栏： JavScript vue element-ui 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn6107/article/details/126946319
版权

  关于el-dialog中@close事件和取消确认按钮，在点击后关闭表单行为后，也会触发@close事件，如果使用相同函数（A）会执行两次（！！前提是当表单为子组件时，需要通过父亲传递的关闭表单函数触发表单关闭，因此无法直接更改visible的变量关闭表单），在其他文章中看到说取消确认按钮换一个函数，但是换一个函数表单始终是要被关闭的，那最终还是会触发@close事件，本人想到了一个简单的处理方法，就是在关闭表单后被执行的函数中，加入表单显示隐藏状态的判断，如果表单已经被关闭了，那么就不执行。如此便能解决函数被执行两次的冲突问题

Vue中如何优雅地处理 `＜el-dialog＞` 的关闭事件
程序猿熊躍暉的专栏
04-22 1280
在日常开发中，合理利用@close和可以极大地提升用户体验，同时保持代码的简洁性和可维护性。关注我获取更多前端开发技巧和实战经验！注：本文内容基于当前的技术框架和最佳实践编写，旨在提供实用指导。随着技术的发展，建议持续关注官方文档和社区动态，以便及时更新知识库。
Vue + elementUI使用中总结，包括踩坑（更新中）
是日前端
11-11 2771
<el-table-column prop="reportName" label="报告名称"> <template slot-scope="scope"> <el-input v-model="scope.row.reportName" @blur="confirmData" clearable></el-input> </tem
关于el-dialog中@close事件和取消确认按钮并用，会触发两次关闭表单的操作
niuniu2878499107的博客
03-24 4281
关于el-dialog中@close事件和取消确认按钮并用，会触发两次关闭表单的操作
el-dialog的close事件会执行两次
lianflower的博客
01-25 1173
如果close事件执行的方法有传参，那么定义一个变量传参，而不是写死。
解决子组件中el-dialog关闭地调用两次接口问题
sinat_34896766的博客
05-21 1096
【代码】解决子组件中el-dialog关闭地调用两次接口问题。
el-dialog 的关闭事件执行两次
IS_huang的博客
12-24 6267
<el-dialog class="dataObject" :title="$t('add.B') + $t('dataObject.C')" :visible.sync="viewing" :close-on-click-modal="false" width="40.5rem" @open="load" @closed="handleDialogClosed"
记录element bug issuei：el-dialog的close事件有bug：导致回调方法被执行了两次
Bidding
08-03 3808
el-dialog的close事件有bug：导致回调方法被执行了两次 目前最新版本2.13.2依旧存在这个问题! 问题：el-dialog的close事件有bug：导致回调方法被执行了两次 场景：如果@close的回掉方法（@close=cancel）和取消按钮@click的回调方法（@click=cancel）相同，当点击取消按钮的时候，对应的回调就会被执行两次。如果将@close=cancel改成@click.native=cancel就不会。所以@close封装有问题！【还有这个网址https:/
关于element的dialog的取消(关闭弹窗)方法触发两次
最新发布
maliyao4233的博客
04-18 122
关闭的时候加个修饰符.native。
vue+element-ui商城后台管理系统(day01-day02)
weixin_45614485的博客
08-11 1785
项目介绍 目录 一. 需要用到的技术 二. 项目初始化 三. 登录与退出 四. 格式化的配置问题 五. 设置主页头部与侧边栏 六. 用户列表 七. 自己写发现的错误 一. 需要用到的技术 二. 项目初始化 2.1 项目初始化步骤 安装elementUI插件与axios 设置elementUI按需导入 { "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component",
微服务[学成在线] day14：媒资管理
通往体面生活的路上
07-24 396
???? 知识点概览 为了方便后续回顾该项目时能够清晰的知道本章节讲了哪些内容，并且能够从该章节的笔记中得到一些帮助，所以在完成本章节的学习后在此对本章节所涉及到的知识点进行总结概述。 本章节为【学成在线】项目的 day14 的内容 视频上传成功后通过 RabbitMQ 进行消息发送，再通过 视频处理服务 对视频进行格式转换，以及 m3u8 视频文件的生成。 实现媒资信息的浏览 Vue 跨组件间的通讯实战，实现课程计划与已上传的媒资文件的关联 目录 知识点结合实战应用会更有意义，所以这里不再对
前端三件套知识点
二氧化硅.的博客
01-11 2874
前端三件套知识点
Vue.js 自学教程 API web商城实例
愿你走过半生，归来任是少年。
02-22 7626
vue主要功能 模块渲染 模板化 扩展功能 指令与事件的区别 你看到的 v-bind 特性被称为指令——v-on 事件监听器 项目结构暗示 计算属性缓存 vs 方法 &lt;p&gt;Reversed message: "{{ reversedMessage() }}"&lt;/p&gt; // 在组件中 methods: { rever...
el-dialog打开后关闭，第二次打不开了
Onmyoji_XG的博客
12-02 1783
传过来的参数的变化，并在需要关闭时使用emit方法，将visible设置成false，并告知父组件修改对应绑定的dialogVisible的值。这个弹窗是作为组件引入的，通过绑定dialogVisible，传参给子组件控制弹窗显隐。问题出在关闭时父组件将visible设置成false上，
vue结合el-dialog 封装自己的confirm二次确认弹窗
热门推荐
shibaweijin的博客
02-03 2万+
首先在components 添加 ConfirmAlert文件夹 然后添加vue和js 文件。这里使用el-dialog 主要是用他的关闭动画，让关闭更加丝滑。main.js将alertConfirm挂载vue上。
解决ElementPlus对话框el-dialog中关闭事件重复触发问题
妍思码匠的博客
03-11 490
点击取消按钮：会触发close()关闭函数 → 然后触发对话框的handleClose()函数（内置的@close事件）需要确保点击取消按钮时仅触发一次有效关闭事件，并传递正确的布尔值参数。1. 第一次参数为PointerEvent（事件对象）2. 第二次参数为undefined。
自身使用dialog的坑，点击确认触发了两个事件
jamesclark的博客
11-05 1746
刚开始我以为渲染问题，vue劫持了fabric（canvas插件），一直在想是不是数据劫持问题，结果后来才发现是点击确认按钮，先触发了写的函数，又触发了弹框关闭函数，触发两次导致的 <el-dialog customClass="customWidth" title="划痕" :visible.sync="dialogFormVisible" @close="closeDialog()" :close-on-click-modal="fa
el-dialog遇到的问题
qq_37120809的博客
12-15 2982
3.改上面的问题，把dialog组件自带的关闭按钮去掉了，属性 ：show-close="false"，我下意识想写成（show-close="false"但是会报错），测试又发现新问题：点击取消按钮可以清空form表单里原来的内容，但是点击空白处对话框也会关闭，此时里面内容不会清空；5.遗留问题：在el-table组件中点击编辑回显到dialog弹框里时，修改某条信息但不保存，关闭对话框后，table表格里的信息是修改后的，需要刷新后才能拿回真实的数据，目前是关闭对话框后重新调取接口；
vue elementUI弹窗使用destroy-on-close后，关闭弹窗会重新发送请求
yxm_136452789的博客
01-19 1735
vue elementUI的el-dialog弹窗组件使用destroy-on-close属性后，关闭弹窗会从新发送请求。
el-dialog打开与关闭的几种方式
hikktn的博客
06-17 1万+
欢迎大家来到我的博客，请各位看客们点赞、收藏、关注三连！欢迎大家关注我的知识库，Java之从零开始·语雀你的关注就是我前进的动力！CSDN专注于问题解决的博客记录，语雀专注于知识的收集与汇总，包括分享前沿技术。 ​父组件 子组件 第二种 ref 父组件 this.refs.dialog.visible=true;在兄弟组件中this.refs.dialog.visible = true; 在兄弟组件中 this.refs.dialog.visible=true;在兄弟组件中this.parent.$refs
关于el-dialog中@close事件和取消确认按钮并用，会触发两次关闭表单的操作，如何解决，不想重复调用
09-13
在Element UI的`el-dialog`组件中，当你设置了取消确认按钮并且监听了`@close`事件，有时确实可能会触发关闭操作两次。这通常是由于点击取消按钮后，同时触发了默认的关闭事件和自定义的`close`函数。要解决这个问题...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值