vue中element-ui dialog新增/更新弹框复用，在close时表单重置失败!

Vue Element-UI dialog弹框 表单 编辑后再点击新增 表单无法重置

问题：使用Vue Element-UI dialog嵌套表单，新增和编辑公用一个表单；先点击编辑后打开弹窗，关掉弹窗，点击新增，发现form表单没有清空

 

原因：

（1）resetFields()只是重置为初始值
（2）这个初始值是在form的生命周期函数mounted被调用的时候赋值上去的

解决办法：

点击编辑的时候：把请求回显的数据放到 this.$nextTick(() => { })中,然后关闭弹窗的时候再用this.$refs[formName].resetFields() 就可以了

如：

 //编辑=》弹窗

        editReview(row) {

            getProcessDataOfCompany({ id: row.id })

                .then((res) => {

                    if (res && res.data && res.data.data) {

                        const data = res.data.data

                         this.dialogVisible = true

                        this.$nextTick(() => {

                            this.reviewForm.submitDate = data.applyDate

                            this.reviewForm.applyType = data.applyType

                            this.reviewForm.reviewedDate = data.checkDate

　　　　　　　})

　　　　}

　　})

}