formRef.value.resetFields()失效问题

情景描述：

在做数据新增和修改的时候，由于字段较多，所以使用弹框的形式处理。 在新增的时候，成功请求完接口后需要关闭弹框并清空数据即恢复form表单字段的初始值，这个时候使用resetFields()是没有问题的。

const formRef = ref<>()

formRef.value.resetFields()

但是在做编辑操作时，需要将数据回显到form表单上，数据做部分变动后请求完接口关闭弹框，再次新增时，发现刚编辑的数据依然存在form表单中，并没有初始化开始的空值，即resetFields()没有“起作用”。

究其原因不是没有起作用：

点击编辑的时候，一旦执行visible.value = true， modal框就会显示，然后就执行这块代码

const open = (formParam:API.FormParam,currentRecord:API.RecordItem) => {
    for(const key in record){
        formParam[key] = record[key]
    }
    visible.value = true
}

此时数据修改了，但是Modal里面的a-form还没有mounted，也就是说，数据是在form表单mounted之前回显的，那么这个修改后的数据就成为了form表单的初始值。

而重点是，resetFields方法是用来把表单重置到初始值的，现在初始值都变成回显数据了，再调用resetFields()就像是“没起作用”似的。那么解决方案如下：

在form表单mounted之后再进行数据回显操作就可以了

const handleEdit = () => {
    visible.value = true
    nextTick(() => {
        for(const key in trainingInfo){
            trainingInfo[key] = selectedRecords.value[0][key]
        }
    })
}

那么这样问题就解决了，不过还有一点需要注意就是 visible.value = true要写在nextTick()前面，如果写在后面依然会出现新增时显示的是上一次修改的数据，即初始化失败。