vue3 elementUI 关于el-dialog组件中el-form初始值设置问题以及el-dialog懒加载变即加载解决方案

问题简述

       1.对于form表单重置resetFields()方法，恢复初始值，是恢复表单创建时候初始化时候的值。当我们在el-dialog弹出框中使用el-form的时候应该注意，在弹窗第一次打开的时候，才去加载弹窗内容（即form组件），所以其初始值在此时取得。此种情景就会 造成了我在开始赋值的时候，没有生效，而是在第一次打开之前变更设置的那个值生效了（生效：变为初始值，resetFields()恢复的值）。

        2.问题拓展：一个el-form组件对应一个初始值，如何使得一个el-form组件对应多个“初始值”？实际场景中的我们的弹窗表单很可能只是一个组件，然后点击不同数据，点击重置的时候希望回到不同数据的初始状态。具体比如一个table表中点击不同的行 修改数据， 然后一个弹窗表单组件需要去装载不同的对应行的数据，我们点击重置需要让表单初始值回到对应的这行的数据。

解决方案

1. 关于以上问题1是因为加载时间问题造成的，其解决方案其他博主有很多，但是这里个人提供一个新的解决办法。加载时间问题的根源是由于el-dialog中内容为懒加载，变为即加载即可。方式可以为：在el-dialog组件中 model-value / v-model 的变量值开始设置为true，即默认去初始化el-dialog中的el-form组件。然后在组件初始化完成钩子onMounted中关闭（ v-model变量值设为false）即可。亲测可变即加载，且不会有弹窗闪烁。
2. 关于扩展问题2的解决方案：我是在自己封装的el-form组件中，引入了一个缓存变量。在el-form数据变更时候，将新的传入（或处理后的）值分为两份（注意要分为不同的引用，不能两个变量指向同一引用），一份去绑定el-form的model，一份留存。重置时候：调用重置方法时候resetFields()，这时候的初始值不是期望值，然后再去将缓存的数据深拷贝一份到el-form的model绑定变量。以下为核心代码片段

   const loadData = (formData) =>{
       info.form = formData;//装载表单数据<el-form ref="formRef" :model="info.form"
       info.formTemp = _.cloneDeep(formData);
   }
   
   const reset = () => {
     if (!formRef) return
     formRef.value?.resetFields() 
   //resetFields：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
     info.form = _.cloneDeep(info.formTemp)
   }

   _.cloneDeep来自于import _ from 'lodash' ，这个插件的深度克隆方法，避免不同变量指向同一引用。

 总结

关于组件赋值有效性问题，需要注意组件实际生成加载时机。尤其是当我们在使用el-dialog时候，需要注意懒加载产生的系列问题。