elementUI中关闭el-dialog时如何彻底销毁其中的内容和数据

最新推荐文章于 2024-07-15 16:00:47 发布
最新推荐文章于 2024-07-15 16:00:47 发布
阅读量8.3k 收藏 7
点赞数 8
分类专栏： elementUI 文章标签： elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mitchell1696/article/details/128801220
版权

vue+elementUI项目，点击某个按钮显示el-dialog弹框，弹框中有tab标签页，用来显示不同类型的echarts图表。bug如下：第一次打开弹框，选中第二个tab之后关闭弹框，再次打开弹框时默认选中的是第二个tab，但展示的是第一个tab的数据。

问题分析

在el-dialog组件中设置了destroy-on-close=“true”,文档说关闭时销毁 Dialog 中的元素，由源码得到该属性会让class为el-dialog的dom节点重新生成。但是dialog的数据是维护在dialog的父组件中，而destroy-on-close属性是销毁dialog组件及其子元素。

解决方案

  • 使用v-if代替destroy-on-close

示例代码

<el-dialog title="详情" :visible.sync="innerVisible" v-if="innerVisible"></el-dialog>
Lewiis
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
element ui 对话框el-dialog关闭事件详解
01-21
通常会有需求，在关闭弹框后需要清空填写的数据，这时候就需要关闭事件了 <el title=标题 visible.sync=bind size=small close='closeDialog'> </el> 在标签中加入@close=’closeDialog’ mothods中加入 //关闭弹框的事件 closeDialog(){ this.xxx = '';//清空数据 }, 以上这篇element ui 对话框el-dialog关闭事件详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
element-ui dialog :destroy-on-close=“true“ 踩坑
秋实的博客
06-10 3592
el-dialog关闭时，摧毁其中子组件 destroy-on-close
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
穆雄雄的博客
05-05 6425
大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂 前言 现在是2022年5月5日22:48:21！ 今天在使用element-ui中的el-dialog的时候遇到了个这样的问题：页面上点击添加的按钮，弹出el-dialog对话框，该对话框中有个添加表单的子组件，然后填写值进行保存，点击保存按钮之后，el-dialog框关闭。继续点击添加的按钮，el-dialog框继续弹出，但是上次填写的表单内容没有清空。 图如下： 大致就是图上的意思。 实现思路 一开始我和同事想的是表单没有清空，于是我们就开..
vue关闭el-dialog弹窗销毁dom、数据（有效版）
两眼一睁 神志不清
07-02 5244
vue中关闭el-dialog时，再次打开新增页面上次的数据不会销毁，如何解决： 最基本的使用v-if <el-dialog class="detail" v-if="visible" :title="title" :close-on-click-modal="false" :visible.sync="visible" @close="closed"> js closed() { this.visible = false; this.isPass.
elementUI弹窗关闭自动清空表单以及校验规则及不生效处理办法
发渐稀的博客
08-30 2633
element组件中的Dialog 对话框，有时候会出现，第一次打开的时候校验没有问题，但是如果紧接着第二次打开弹框的时候，上一次的校验就会残留在本次打开的弹窗上。点击叉号那么就需要在叉号的回调函数中去清空本次的校验记录，而取消按钮更好做，直接写个函数指明取消即可。弹窗关闭一共就两种方式，第一种点击叉号，第二种点击取消按钮，那么就需要在这两个节骨眼上做文章；对于叉号而言，添加close事件，函数同取消按钮。
Vue3+Element-Plus+el-dialog的关闭销毁元素
Daisy_ls的博客
02-23 5882
Vue3 + Element-Plus + el-dialog 的关闭销毁元素 destroy-on-close 关闭时销毁 Dialog 中的元素
el-dialog组件隐藏时直接销毁组件
qq_43750656的博客
10-19 1687
使用el-dialog组件时，不通过v-model绑定的布尔类型的变量来控制是否隐藏展示，而是在需要不展示的时候直接销毁组件。在组件上标识 v-if 可控制组件隐藏时直接销毁dialog。
（笔记）解决element的Dialog对话框关闭后清除数据残留及校验规则
qq_57557454的博客
09-12 1390
由于添加和修改用的是同一个Dialog导致数据残留，试过用官网的重置验证规则this.$refs[formName].resetFields()，也试过使用 v-if 控制Dialog的存在，但都不起作用。1. 给Dialog的关闭按钮绑定事件。2. 事件回调的代码如下。
vue dialog弹窗关闭时清空数据
m0_68177019的博客
10-20 2091
const originForm = this.$options.data().formdialog //formdialog为要清空的对象。this.dialogFormVisible = false //隐藏表单。
elment-ui dialog form表单关闭弹框销毁
qq_59224836的博客
01-05 529
elment-ui dialog form表单关闭弹框销毁
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
12-09
调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <!...
el-dialog 销毁子组件
bozudaoren的博客
02-27 1087
。
ElementUI问题:el-dialog在关闭的时候，需要销毁里面的子组件！
chenghao13834505361的博客
06-28 260
ElementUI问题:el-dialog在关闭的时候，需要销毁里面的子组件
Vue中关闭el-dialog时如何销毁（之前各种方法都不行）
热门推荐
weixin_43948298的博客
07-11 1万+
今天在写Vue时遇到一个用element-ui的dialog时，在一个页面有多个地方同时应用了同一个dialog，但是发现虽然设置了destroy-on-close=true的参数依旧无法让数据在销毁时候重置 尝试了很多方法，包括在el-dialog上设置v-if, <el-dialog :title="title" v-if="centerDetailVisible" :visible.sync="centerDetailVis
element-plus vue3 dialog form 清空 重置 resetFields
zhengjf123的专栏
10-13 5806
添加、修改同一个弹框，清空form表单数据。 element-plus vue3 dialog form 清空 重置 resetFields
el-dialog销毁
finally_flx的博客
01-16 3249
问题描述 使用<el-dialog>弹出框时，数据不会根据点击不同而实时更新，一直都会是第一次点击显示弹出框时的数据，这时就需要在弹出框关闭时销毁。 v-if控制 <el-dialog title="修改信息" :visible.sync="updateTableVisible" center v-if="updateTab...
el-date-picker手动输入日期,通过设置开始时间和阶段自动填写结束时间
最新发布
dy1717的博客
07-15 314
需求：根据开始时间，通过填写阶段时长，自动填写结束时间，同时开始时间和节数时间可以手动输入。，我这边后端参数需要的是时间戳，
elementui中 el-dialog使用
03-03
Element UI是一套基于Vue.js的组件库，其中el-dialog是其中的一个组件，用于实现弹窗对话框的功能。下面是关于el-dialog的使用介绍： 1. 引入Element UI库：在Vue项目中，首先需要引入Element UI库。可以通过npm安装，然后在项目的入口文件中引入Element UI的样式和组件。 2. 使用el-dialog组件：在需要使用弹窗对话框的地方，可以使用el-dialog组件进行布局和交互。以下是el-dialog的基本用法： ```html <template> <div> <el-button @click="showDialog">打开对话框</el-button> <el-dialog :visible.sync="dialogVisible" title="对话框标题"> <p>对话框内容</p> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false }; }, methods: { showDialog() { this.dialogVisible = true; } } }; </script> ``` 在上述代码中，通过点击按钮打开对话框，使用`:visible.sync`绑定`dialogVisible`变量控制对话框的显示与隐藏。`title`属性设置对话框的标题，`slot="footer"`用于自定义对话框的底部按钮。 3. 自定义对话框内容：可以在el-dialog组件内部编写自定义的对话框内容，可以是文本、表单、图片等任意HTML元素。 4. 更多配置选项：el-dialog还提供了一些其他的配置选项，如`width`设置对话框的宽度，`modal`设置是否显示遮罩层等。可以根据实际需求进行配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Lewiis

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

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

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

打赏作者

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

抵扣说明：

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

余额充值