antd-vue的modal内置表单重置原始值

1.第三方库版本

Vue3.0，Antd3.2

2.针对情景

• modal内嵌表单作为组件进行引入，多个入口对modal进行复用
• modal内表单根据入口传入值进行初始化，再次打开后根据入口的值进行初始化

3.关键属性

• destroyOnClose：modal属性，关闭modal时销毁子元素
• resetFields：表单重置函数，重置值以及校验状态等

4.逻辑解析

核心代码

// 数据改变时修改表单值
watch(
    () => props.record,
    (n,o) => initialForm(state.formState, n),
    {
        deep: true
    }
)
// 关闭弹窗时重置表单值
const Cancel = function() {
    formRef.value.resetFields()
    context.emit('update:visible', false)
}

1. 首次打开modal，根据首次传入值进行初始化后执行mounted周期
2. 关闭modal前，resetFields()重置表单内数据为mounted周期时的值，即首次传入值
3. 关闭modal后，destroyOnClose销毁modal内的子元素
4. 再次打开modal，子元素销毁后新建，二次传入值进行初始化后再执行mounted周期
5. 关闭modal前，resetFields()重置表单内数据为mounted周期时的值，即二次传入值

综上，modal内的表单值始终与传入的数据值相同