hookehuyr

✨ feat: 监听formData的变化,当有新的字段添加时重新设置监听器

<!--
* @Date: 2022-07-18 10:22:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-02-17 15:02:03
* @LastEditTime: 2025-02-25 11:48:35
* @FilePath: /data-table/src/views/index.vue
* @Description: 首页
-->
......@@ -237,6 +237,36 @@ const PCommit = ref({});
* 表单结构数据
*/
const formData = ref([]);
// 为每个表单字段创建单独的监听器
// 可以监听到简单组件的字段的值变化,自定义的组件无法监听到
const setupFieldWatchers = () => {
formData.value.forEach((field) => {
watch(
() => field.value,
(newValue, oldValue) => {
if (newValue !== oldValue) {
console.log('字段变化:', {
key: field.key,
name: field.name,
oldValue: oldValue,
newValue: newValue
});
}
}
);
});
};
// TAG: 监听formData的变化,当有新的字段添加时重新设置监听器
watch(
() => formData.value,
() => {
setupFieldWatchers();
},
{ immediate: true }
);
/**
* 格式化表单数据
*/
......