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}