el-dialog弹窗中进度条的(mqtt提供)数据无法清空(清空方法)

 清空方法

 this.$nextTick(()=>{this.$refs.devicefromDialog.clearValidate('airSwitchNo');//清除的校验规则prop传的值this.$refs['devicefromDialog'].resetFields();//清除表单内容})

场景:进度条的数据需要在关闭的时候,清空上一次的缓存记录,但是给关闭按钮了一个点击事件发现真实数据在控制台清空了,但是弹窗中进度条数据还是有上一次的记录,然后由上一次的缓存的记录变到0,再由0加载本次的进度到100%。

解决办法:

第一种:需要后台和mqtt配合,各种生成一个同一次操作的任务生成一个相同的随机数据(因为账号可以同时多人登录,所以随机数可以保证是同一个人在某个时间下产生的进度条数据,这样多个人在同一时刻操作同一批数据时进度条数据就不会被混淆在一起)
1.1、种方法是先把每次操作的某个任务的接口接通后生成一个随机数;再由mqtt返回数据中添加一个随机数,
然后mqtt随机数和后台的操作接口生成的随机数相对比然后再添加到进度条相关数据(操作总数、当前完成数,
导致出错以后的错误信息列表)中。1.2、在每次关闭的时候清空上一次的进度条数据
closeProgressBar(type) {this.$nextTick(()=>{//为了确保进度条没有到百分百前就关闭弹窗,数据不再更新到百分百的问题this.$set(this, 'lineNum', 0)this.$set(this, 'handlerNum', 0)this.$set(this, 'proportion', 0)this.$set(this, 'errorMessageList', [])this.$set(this, 'javaRequestId', '')})
}
第二种方法使用vue的自带方法清除变化后的数据(未测试)

 

<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" @close='closeProgressBar("progressBar")' :title="proportionDialogTitle" :visible.sync="dialogProgressBar" center width="20%"class="existDeviceDialog">
<el-progress :percentage="proportion>100? 100 : proportion"></el-progress></el-dialog>this.$options.data():vue原始的数据,初始化时加载的data
this.$data:现在阶段的vue数据,就是当前变化后data的数据
Object.assign(目标对象,源对象1,源对象2....) 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。object.assign注意:
1、目标对象要与源对象有相同的属性,将会被源对象覆盖(后面的源对象具有相同的属性都会被依次被后面的源对象覆盖掉)
2、该方法只会拷贝源对象自身可枚举的属性到目标对象
3、目标对象自身也会改变,如下案例let obj = {a:1,b:2,c:3};
let obj2 = {a:7, b:8, c:9, d:4, e:5, c:6};
console.log(Object.assign(obj,obj2)) //{a: 7, b: 8, c: 6, d: 4, e: 5}

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

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

相关文章

Java开发之Redis核心内容【面试篇 完结版】

文章目录 前言一、redis使用场景1. 知识分布2. 缓存穿透① 问题引入② 举例说明③ 解决方案④ 实战面试 3. 缓存击穿① 问题引入② 举例说明③ 解决方案④ 实战面试 4. 缓存雪崩① 问题引入② 举例说明③ 解决方案④ 实战面试 5. 缓存-双写一致性① 问题引入② 举例说明③ 解决…

动态规划之子数组系列

子数组系列 1. 环形⼦数组的最⼤和2. 乘积最大子数组3. 等差数列划分4. 最长湍流子数组5. 单词拆分6. 环绕字符串中唯⼀的子字符串 1. 环形⼦数组的最⼤和 1.题目链接&#xff1a;环形⼦数组的最⼤和 2.题目描述&#xff1a;给定一个长度为 n 的环形整数数组 nums &#xff0c…

(其他) 剑指 Offer 67. 把字符串转换成整数 ——【Leetcode每日一题】

❓ 剑指 Offer 67. 把字符串转换成整数 难度&#xff1a;中等 写一个函数 StrToInt&#xff0c;实现把字符串转换成整数这个功能。不能使用 atoi 或者其他类似的库函数。 首先&#xff0c;该函数会根据需要丢弃无用的开头空格字符&#xff0c;直到寻找到第一个非空格的字符为…

STM32初学-外部RTC时钟芯片DS3231

RTC(Real_Time Clock)即实时时钟&#xff0c;它是电子产品中不可或缺的东西。其最直接的作用就是时钟功能。细心的朋友可以发现&#xff0c;当我们的电脑或者手机没联网时&#xff0c;仍然可以正常显示日期与时钟&#xff0c;这就是RTC的功劳。 RTC的运行无需网络连接&#xff…

JavaScript设计模式(三)——单例模式、装饰器模式、适配器模式

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…

MySQL——日志

日志的作用 1.用来排错 2.用来做数据分析 3.了解程序的运行情况&#xff0c;是否健康--》了解MySQL的性能&#xff0c;运行情况 分类 mysql很多有类型的日志&#xff0c;按照组件划分的话&#xff0c;可以分为 服务层日志 和 存储引擎层日志 &#xff1a; - 服务层…

java包装类简单认识泛型

1 包装类 在 Java 中&#xff0c;由于基本类型不是继承自 Object &#xff0c;为了在泛型代码中可以支持基本类型&#xff0c; Java 给每个基本类型都对应了一个包装 类型。类中比如由属性/方法 使用比较方便 1.1 基本数据类型和对应的包装类 1.2 装箱和拆箱 装包/装箱 : …

分布式版本控制工具——git

✅<1>主页&#xff1a;&#xff1a;我的代码爱吃辣 &#x1f4c3;<2>知识讲解&#xff1a;Linux——git ☂️<3>开发环境&#xff1a;Centos7 &#x1f4ac;<4>前言&#xff1a;git是一个开源的分布式版本控制系统&#xff0c;可以有效、高速地处理从很…

学习笔记——树上哈希

普通子树哈希 树上的很多东西都是转化成链上问题的&#xff0c;比如树上哈希 树上哈希&#xff0c;主要是用于树的同构这个东西上的 什么是树的同构&#xff1f; 如图&#xff0c;不考虑节点编号&#xff0c;三棵树是同构的 将树转化成链&#xff0c;一般有两种方式&#xf…

JS防抖和节流在前端开发中的应用场景

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 防抖&#xff08;Debouncing&#xff09;⭐ 节流&#xff08;Throttling&#xff09;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端…

KT142C-sop16语音芯片ic内置320Kbyte_USB更新内置空间详细说明

KT142C内置的是320K的空间&#xff0c;但是实际的大小&#xff0c;在电脑里面显示&#xff0c;应该是315Kbyte。 打开我的电脑&#xff0c;芯片连接PC之后&#xff0c;自动多出来了一个U盘&#xff0c;如下图所示&#xff1a; 这里的空间只有315KB &#xff0c;因为文件系统占…

猫头虎的技术笔记:Spring Boot启动报错解决方案

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

Java项目基于SpringBoot藏区特产销售系统,可作为毕业设计

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W,Csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 今天为大家带来的是基于 Java SpringBootVue 的藏区特产销售系统 文章目录 1. 简介2.主要技术3 功能分析4 系…

【2023高教社杯】B题 多波束测线问题 问题分析、数学模型及参考文献

【2023高教社杯】B题 多波束测线问题 问题分析、数学模型及参考文献 1 题目 1.1 问题背景 多波束测深系统是利用声波在水中的传播特性来测量水体深度的技术&#xff0c;是在单波束测深的基础上发展起来的&#xff0c;该系统在与航迹垂直的平面内一次能发射出数十个乃至上百个…

Redis集群3.2.11离线安装详细版本(使用Ruby)

1.安装软件准备 1.Redis版本下载 Index of /releases/http://download.redis.io/releases/ 1.2gcc环境准备 GCC(GNU Compiler Collection,GNU编译器套件)是一套用于编译程序代码的开源编译器工具集。它的主要用途是将高级编程语言(如C、C++、Fortran等)编写的源代码转换…

SEO百度优化基础知识全解析(了解百度SEO标签作用)

百度SEO优化的作用介绍&#xff1a; 百度SEO优化是指通过对网站的内部结构、外部链接、内容质量、用户体验等方面进行优化&#xff0c;提升网站在百度搜索结果中的排名&#xff0c;从而提高网站的曝光率和流量。通过百度SEO优化&#xff0c;可以让更多的潜在用户找到你的网站&…

软件设计模式(二):工厂、门面、调停者和装饰器模式

前言 在这篇文章中&#xff0c;荔枝将会梳理软件设计模式中的四种&#xff1a;工厂模式、Facade模式、Mediator模式和装饰器Decorator模式。其中比较重要的就是工厂模式和装饰器模式&#xff0c;工厂模式在开发中使用的频数比较高。希望荔枝的这篇文章能讲清楚哈哈哈哈&#xf…

【STM32】文件系统FATFS与Flash的初步使用

文件系统简介 简介可以不看&#xff0c;直接看移植步骤 文件系统是介于应用层和底层间的模糊层。底层提供API&#xff0c;比如说使用SDIO或者SPI等读写一个字节。文件系统把这些API组合包装起来&#xff0c;并且提供一些列函数&#xff0c;我们可以使用这些函数进行更进一步的…

分享一个python基于数据可视化的智慧社区服务平台源码

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人七年开发经验&#xff0c;擅长Java、Python、PHP、.NET、Node.js、微信小程序、爬虫、大数据等&#xff0c;大家有这一块的问题可以一起交流&#xff01; &#x1…

MySQL数据类型

目录 MySQL数据类型 数据类型分类 数值类型 tinyint类型 bit类型 float类型 decimal类型 字符串类型 char类型 varchar类型 char和varchar比较 时间日期类型 enum和set类型 MySQL数据类型 数据类型的作用&#xff1a; 决定了存储数据时应该开辟的空间大小。决定…