elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件

大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂

前言

现在是2022年5月5日22:48:21

今天在使用element-ui中的el-dialog的时候遇到了个这样的问题:页面上点击添加的按钮,弹出el-dialog对话框,该对话框中有个添加表单的子组件,然后填写值进行保存,点击保存按钮之后,el-dialog框关闭。继续点击添加的按钮,el-dialog框继续弹出,但是上次填写的表单内容没有清空。

图如下:

大致就是图上的意思。

实现思路

  1. 一开始我和同事想的是表单没有清空,于是我们就开始操作表单。比如点击添加按钮的时候,清空表单,发现不行;每天添加完之后,清空表单,发现不行;弹框的时候清空表单,发现还是不行!
  2. 接着想到了关闭框的时候销毁对象,查找官方文档,发现了个属性:destroy-on-close,文档中定义是:关闭时销毁 Dialog 中的元素boolean类型,默认是flase,于是我将值改成了true,发现还是不行。
  3. 从网上查了下,有人说用v-if,我加上了,还是不行~
  4. 后来同事用了个时间戳的方式,终于给解决了。

实现代码

本来我都给前端的朋友打电话了,问这个问题怎么解决,他给了我个方案,大致是el-dialog的显示时机和子组件的展示时机一样,这种方案没有试,不知道可行不可行,我们现在用的是下面这种写法:

在子组件的写如下代码:

    <el-dialogtitle="新 增":visible.sync="addDeviceDialogVisible":append-to-body="true"top="1vh"width="70%"@destroy-on-close="true"><addDevice:key="timer"@addDeviceResult="addDeviceResult"@quxiaoClickResult="quxiaoClickResult"></addDevice></el-dialog>

注意:重点就是:key="timer",这个关键代码。

然后在显示此el-dialog对话框的时候,给timer日期赋值,代码如下:

     addDeviceBtn(){this.addDeviceDialogVisible = true;this.timer = new Date().getTime();},

bug完美解决,记录记录不迷路~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/323642.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL 中的重做日志,回滚日志以及二进制日志的简单总结

转载自 MySQL 中的重做日志&#xff0c;回滚日志以及二进制日志的简单总结 MySQL中有六种日志文件&#xff0c;分别是&#xff1a;重做日志&#xff08;redo log&#xff09;、回滚日志&#xff08;undo log&#xff09;、二进制日志&#xff08;binlog&#xff09;、错误日志…

c语言分离三位数

#include<stdio.h> main(){ int k,l,m,n;printf("请输入一个三位数"); scanf("%d",&k);lk/100;mk/10%10;nk%10;printf("这个三位数的百位是:%d\n",l);printf("这个三位数的十位是:%d\n",m);printf("这个三位数的个位是…

POJ1821-Fence【单调队列,dp】

正题 题目链接:http://poj.org/problem?id1821 题目大意 有n个木板,m个工人&#xff0c;每个木板只能被粉刷一次&#xff0c;第i个工人如果刷的话必须刷木板SiSi&#xff0c;连续的不超过LiLi的&#xff0c;没一块PiPi。 解题思路 用fi,jfi,j表示前j块木板&#xff0c;前i个…

分布式ID自增算法 Snowflake

近在尝试EF的多数据库移植&#xff0c;但是原始项目中主键用的Sqlserver的GUID。MySQL没法移植了。 其实发现GUID也没法保证数据的递增性&#xff0c;又不太想使用int递增主键&#xff0c;就开始探索别的ID形式。 后来发现twitter的Snowflake算法。 一开始我尝试过直接引用N…

java中,根据指定日期显示出前n天的日期

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 今天分享的是&#xff1a;在java中&#xff0c;根据指定日期显示出前n天的日期 效果如下&#xff1a; 大家注意观察上面的时间&#xff0c;我传入的时间是&#xff1a;2022年5月9日21:28:…

你真的很熟分布式和事务吗?

转载自 你真的很熟分布式和事务吗&#xff1f; 微吐槽 hello,world. 不想了&#xff0c;我等码农&#xff0c;还是看看怎么来处理分布式系统中的事务这个老大难吧&#xff01; 本文略长&#xff0c;读者需要有一定耐心&#xff0c;如果你是高级码农或者架构师级别&#xf…

线程1

模拟龟兔赛跑 线程1 package test;/*** 模拟龟兔赛跑* author Administrator**/ class Rab extends Thread{public void run() {for (int i 0; i < 100; i) {System.out.println("兔子跑了"i"步");}} }class array1 extends Thread{public void run(…

jdbc实现批量给多个表中更新数据(解析Excel表数据插入到数据库中)

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 前言 现在是&#xff1a;2022年5月19日08:01:51 今天遇到了个这样的需求&#xff0c;解析excel表中的数据&#xff0c;以JDBC的方式&#xff0c;将数据批量更新至不同的数据表中。注意&am…

CF559C-Gerald and Giant Chess【计数类dp】

正题 上不了Codeforces&#xff0c;就用洛谷了 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidCF559C 题目大意 H∗WH∗W的棋盘上有一个卒从(1,1)走到(H,W)&#xff0c;有些点不能走&#xff0c;求方案总数。 解题思路 首先如果没有障碍走到(i,j)方案数…

.Net Core 全局配置读取管理方法 ConfigurationManager

最近在学习.Net Core的过程中&#xff0c;发现.Net Framework中常用的ConfigurationManager在Core中竟然被干掉了。 也能理解。Core中使用的配置文件全是Json&#xff0c;不像Framework使用的XML&#xff0c;暂时不支持也是能理解的&#xff0c;但是毕竟全局配置文件这种东西还…

Http 持久连接与 HttpClient 连接池

转载自 Http 持久连接与 HttpClient 连接池 一、背景 HTTP协议是无状态的协议&#xff0c;即每一次请求都是互相独立的。因此它的最初实现是&#xff0c;每一个http请求都会打开一个tcp socket连接&#xff0c;当交互完毕后会关闭这个连接。 HTTP协议是全双工的协议&#x…

jdbc解析excel文件,批量插入数据至库中

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂”前言现在是&#xff1a;2022年5月20日09:32:38今天遇到了个这样的需求&#xff0c;解析excel表中的数据&#xff0c;以JDBC的方式&#xff0c;将数据批量更新至不同的数据表中。注意&…

线程2

public class test{/*** 测试延迟继承* param args*/public static void main(String[] args) {Cat catnew Cat();cat.start();//启动线程&#xff0c;会导致run函数的运行Dog dognew Dog();//创建一个线程对象Thread tnew Thread(dog);t.start();}} //继承Thread创建线程 clas…

.NET及.NET Core系统架构

.NET 官方架构指南 Microservices and Docker Containers Web Applications with ASP.NET 官网地址&#xff1a;https://www.microsoft.com/net/learn/architecture 三层及多层架构 Multitier Architecture ASP.NET N-Tier Architecture Schema Visual Studio N-Tier Examp…

POJ3208-Apocalypse Someday【数位dp】

正题 题目链接:http://poj.org/problem?id3208 题目大意 求第X个有3个连续的6的数。 解题思路 用fi,j(j<3)fi,j(j<3)表示i位&#xff0c;已经有j个6的方案总数。然后fi,3fi,3表示i位的魔鬼数的总数。 然后动态转移方程。 fi,09∗(fi−1,0fi−1,1fi−1,2)fi,09∗(fi…

Spring Boot 自动配置的 “魔法” 是如何实现的?

转载自 Spring Boot 自动配置的 “魔法” 是如何实现的&#xff1f; Spring Boot是Spring旗下众多的子项目之一&#xff0c;其理念是约定优于配置&#xff0c;它通过实现了自动配置&#xff08;大多数用户平时习惯设置的配置作为默认配置&#xff09;的功能来为用户快速构建出…

for循环(一)

利用for循环打出一百句HelloWorld #include<stdio.h>main(){int i;for(i0;i<100;i){printf("HelloWorld\n");} } ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190324224126588.png?x-oss-processimage/watermark,type_ZmFuZ3poZW5naGVpdGk,sha…

解决vue登录信息不及时更新问题

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 前言 现在是&#xff1a;2022年5月20日09:59:34 前面写过一篇文章&#xff0c;基于bladex框架实现的模拟登录&#xff0c;后来在测试的过程中发现了个问题&#xff0c;即A系统在跳转到本系…

学习ASP.NET Core,怎能不了解请求处理管道[2]: 服务器在管道中的“龙头”地位

ASP.NET Core管道由注册的服务器和一系列中间件构成。我们在上一篇中深入剖析了中间件&#xff0c;现在我们来了解一下服务器。服务器是ASP .NET Core管道的第一个节点&#xff0c;它负责完整请求的监听和接收&#xff0c;最终对请求的响应同样也由它完成。[本文已经同步到《AS…

Ch3101-阶乘分解【数论,质因数分解】

正题 题目链接:http://contest-hunter.org:83/contest/0x30%E3%80%8C%E6%95%B0%E5%AD%A6%E7%9F%A5%E8%AF%86%E3%80%8D%E4%BE%8B%E9%A2%98/3101%20%E9%98%B6%E4%B9%98%E5%88%86%E8%A7%A3 题目大意 质因数分解n!n!的阶乘。 解题思路 很简单的数学题&#xff0c;将1∼n1∼n全部…