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)
}
- 首次打开modal,根据首次传入值进行初始化后执行mounted周期
- 关闭modal前,resetFields()重置表单内数据为mounted周期时的值,即首次传入值
- 关闭modal后,destroyOnClose销毁modal内的子元素
- 再次打开modal,子元素销毁后新建,二次传入值进行初始化后再执行mounted周期
- 关闭modal前,resetFields()重置表单内数据为mounted周期时的值,即二次传入值
综上,modal内的表单值始终与传入的数据值相同