hookehuyr

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

1 <!-- 1 <!--
2 * @Date: 2022-07-18 10:22:22 2 * @Date: 2022-07-18 10:22:22
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-02-17 15:02:03 4 + * @LastEditTime: 2025-02-25 11:48:35
5 * @FilePath: /data-table/src/views/index.vue 5 * @FilePath: /data-table/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -237,6 +237,36 @@ const PCommit = ref({}); ...@@ -237,6 +237,36 @@ const PCommit = ref({});
237 * 表单结构数据 237 * 表单结构数据
238 */ 238 */
239 const formData = ref([]); 239 const formData = ref([]);
240 +
241 +// 为每个表单字段创建单独的监听器
242 +// 可以监听到简单组件的字段的值变化,自定义的组件无法监听到
243 +const setupFieldWatchers = () => {
244 + formData.value.forEach((field) => {
245 + watch(
246 + () => field.value,
247 + (newValue, oldValue) => {
248 + if (newValue !== oldValue) {
249 + console.log('字段变化:', {
250 + key: field.key,
251 + name: field.name,
252 + oldValue: oldValue,
253 + newValue: newValue
254 + });
255 + }
256 + }
257 + );
258 + });
259 +};
260 +
261 +// TAG: 监听formData的变化,当有新的字段添加时重新设置监听器
262 +watch(
263 + () => formData.value,
264 + () => {
265 + setupFieldWatchers();
266 + },
267 + { immediate: true }
268 +);
269 +
240 /** 270 /**
241 * 格式化表单数据 271 * 格式化表单数据
242 */ 272 */
......