vue2 el-dialog中创建和编辑使用同一个el-form 导致数据回显的bug

问题描述

 新增和编辑是同一个表单。

 先新增后编辑，编辑弹框可以正常赋值；

 先编辑后新增，新增弹框会初始化编辑的数据；

解决办法

编辑时回显数据时，使用this.nextTick()进行包裹。

    editItem(rows){
      this.editId = rows.id
      this.dialogTitle = '更新'
      // 打开对话框
      this.dialogVisible = true
      this.$nextTick(()=> {
        // 数据回显
        this.userInfo =  {...rows}
      })
    },

问题解析

 根据文档显示，resetFields是对整个表单进行重置，将所有字段值重置为空并移除校验结果。但是实际上resetFields是清空validateMessage，然后把值重置成了上一次初始化的值。
 如果你编辑时，第一次打开dialog的时候给表单绑定的model赋值了，这时候这个model的初始值就变成了你所赋值的值，所以resetFields的时候，会将model对应的每个值重置到初始值，这时候的初始值就是你编辑时赋值的那个值。
 所以：页面一进入， form表单就是原始的。点击编辑后，会一个个给form进行赋值，那么重置时，就会重置给给form赋值后的效果。
 resetFields()方法是初始化值，并不是清空所有值。这个初始值是在form mounted生命周期被赋值上去的。所以，在form mounted之前，如果form表单赋值了，那么后面调用resetFields()都是无效的，因为form表单的初始值已经在mounted之前就被赋值了。