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

news/2025/3/6 2:25:22/

 清空方法

 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.ppmy.cn/news/1100726.html

相关文章

SQL-DCL

DCL-管理用户 1.查询用户 USE mysql&#xff1b; SELECT * FROM user&#xff1b; 2.创建用户 CREATE USER “用户名”“主机名” IDENTIFIED BY "密码“&#xff1b; 3.修改用户密码 ALTER USER “用户名”“主机名” IDENTIFIED WITH mysql_native_password BY &quo…

Linux系统--基础IO

文章目录 文件的概念 C语言文件IO相关操作 系统调用接口 文件描述符 文件周边概念 设计用户层缓冲区 minishell中支持重定向 文件系统 软硬链接 动静态库 一、文件的概念 1.在系统角度上来说 文件内容属性 如果在磁盘上建立一个为0KB的文件&#xff0c;磁盘上也会存储文件的…

PEFT学习:使用LORA进行LLM微调

使用LORA进行LLM微调 PEFT安装LORA使用&#xff1a; PEFT安装 由于LORA,AdaLORA都集成在PEFT上了&#xff0c;所以在使用的时候安装PEFT是必备项 方法一&#xff1a;PyPI To install &#x1f917; PEFT from PyPI: pip install peft方法二&#xff1a;Source New features…

Java面向对象学习笔记-1

前言 Java是一门面向对象的编程语言,通过类和对象的概念可以对现实事物进行抽象和封装。本文将带领大家逐步理解Java面向对象编程的关键要点,并通过示例代码加深理解。学完本文,你将能够熟练使用Java类和对象表示现实世界中的概念,为后续的Java学习奠定坚实基础。 类和对象 …

[构建 Vue 组件库] 小尾巴 UI 组件库 —— 横向商品卡片(仿淘宝)

文章归档于&#xff1a;https://www.yuque.com/u27599042/row3c6 组件库地址 npm&#xff1a;https://www.npmjs.com/package/xwb-ui?activeTabreadmegitee&#xff1a;https://gitee.com/tongchaowei/xwb-ui 下载 npm i xwb-ui配置 按需导入 import {组件名 } from xwb-…

正中优配:北向资金净流出70亿元,A股会不会二次探底?

A股三大股指均跌超1%。 9月7日&#xff0c;上证综指跌1.13%&#xff0c;报3122.35点&#xff1b;深证成指跌1.84%&#xff0c;报10321.44点&#xff1b;创业板指跌2.11%&#xff0c;报2056.98点。两市超4700只股票下跌&#xff0c;芯片、新能源继续萎靡、白酒、AI等大都职业集…

蓝桥杯官网练习题(图像模糊)

题目描述 小蓝有一张黑白图像&#xff0c;由 nm 个像素组成&#xff0c;其中从上到下共 n 行&#xff0c;每行从左到右 &#xfffd;m 列。每个像素由一个 0 到 255 之间的灰度值表示。 现在&#xff0c;小蓝准备对图像进行模糊操作&#xff0c;操作的方法为&#xff1a; 对…

HI3559A DMEB试玩

HI3559A DMEB试玩 1、 不支持himm命令2、 默认ip设置3、 设置登录密码4、 不支持telnet登录5、 不支持ftp7、 命令行的现实格式修改9、 IIC例程不通10、 HI3559a从emmc启动&#xff0c;文件系统变为只读11、 驱动加载12、 官方例程中SENSOR不出图 最近需要使用3559来&#xff0…