Commit 4c67d8c38807929f8ebc3d9cd03a93992e50debe
Committed by
GitHub
GitHub
1 parent
0ab2a541
feat: 使用useForm时调用setFieldsValue后，组件的onChange未主动触发 (#2142) (#2503)
Co-authored-by: maxiaojing <maxiaojing@hashdata.cn>
Showing
2 changed files
with
17 additions
and
10 deletions
src/components/Form/src/hooks/useFormEvents.ts
| @@ -76,6 +76,11 @@ export function useFormEvents({ | @@ -76,6 +76,11 @@ export function useFormEvents({ | ||
| 76 | const hasKey = Reflect.has(values, key); | 76 | const hasKey = Reflect.has(values, key); |
| 77 | 77 | ||
| 78 | value = handleInputNumberValue(schema?.component, value); | 78 | value = handleInputNumberValue(schema?.component, value); |
| 79 | + const { componentProps } = schema || {}; | ||
| 80 | + let _props = componentProps as any; | ||
| 81 | + if (typeof componentProps === 'function') { | ||
| 82 | + _props = _props({ formModel: unref(formModel) }); | ||
| 83 | + } | ||
| 79 | // 0| '' is allow | 84 | // 0| '' is allow |
| 80 | if (hasKey && fields.includes(key)) { | 85 | if (hasKey && fields.includes(key)) { |
| 81 | // time type | 86 | // time type |
| @@ -85,17 +90,15 @@ export function useFormEvents({ | @@ -85,17 +90,15 @@ export function useFormEvents({ | ||
| 85 | for (const ele of value) { | 90 | for (const ele of value) { |
| 86 | arr.push(ele ? dateUtil(ele) : null); | 91 | arr.push(ele ? dateUtil(ele) : null); |
| 87 | } | 92 | } |
| 88 | - formModel[key] = arr; | 93 | + unref(formModel)[key] = arr; |
| 89 | } else { | 94 | } else { |
| 90 | - const { componentProps } = schema || {}; | ||
| 91 | - let _props = componentProps as any; | ||
| 92 | - if (typeof componentProps === 'function') { | ||
| 93 | - _props = _props({ formModel }); | ||
| 94 | - } | ||
| 95 | - formModel[key] = value ? (_props?.valueFormat ? value : dateUtil(value)) : null; | 95 | + unref(formModel)[key] = value ? (_props?.valueFormat ? value : dateUtil(value)) : null; |
| 96 | } | 96 | } |
| 97 | } else { | 97 | } else { |
| 98 | - formModel[key] = value; | 98 | + unref(formModel)[key] = value; |
| 99 | + } | ||
| 100 | + if (_props?.onChange) { | ||
| 101 | + _props?.onChange(value); | ||
| 99 | } | 102 | } |
| 100 | validKeys.push(key); | 103 | validKeys.push(key); |
| 101 | } else { | 104 | } else { |
| @@ -103,13 +106,13 @@ export function useFormEvents({ | @@ -103,13 +106,13 @@ export function useFormEvents({ | ||
| 103 | try { | 106 | try { |
| 104 | const value = nestKey.split('.').reduce((out, item) => out[item], values); | 107 | const value = nestKey.split('.').reduce((out, item) => out[item], values); |
| 105 | if (isDef(value)) { | 108 | if (isDef(value)) { |
| 106 | - formModel[nestKey] = value; | 109 | + unref(formModel)[nestKey] = unref(value); |
| 107 | validKeys.push(nestKey); | 110 | validKeys.push(nestKey); |
| 108 | } | 111 | } |
| 109 | } catch (e) { | 112 | } catch (e) { |
| 110 | // key not exist | 113 | // key not exist |
| 111 | if (isDef(defaultValueRef.value[nestKey])) { | 114 | if (isDef(defaultValueRef.value[nestKey])) { |
| 112 | - formModel[nestKey] = cloneDeep(defaultValueRef.value[nestKey]); | 115 | + unref(formModel)[nestKey] = cloneDeep(unref(defaultValueRef.value[nestKey])); |
| 113 | } | 116 | } |
| 114 | } | 117 | } |
| 115 | }); | 118 | }); |
src/views/demo/form/RuleForm.vue
| @@ -98,6 +98,9 @@ | @@ -98,6 +98,9 @@ | ||
| 98 | key: '2', | 98 | key: '2', |
| 99 | }, | 99 | }, |
| 100 | ], | 100 | ], |
| 101 | + onChange: (value) => { | ||
| 102 | + console.log(value, '123'); | ||
| 103 | + }, | ||
| 101 | }, | 104 | }, |
| 102 | rules: [ | 105 | rules: [ |
| 103 | { | 106 | { |
| @@ -235,6 +238,7 @@ | @@ -235,6 +238,7 @@ | ||
| 235 | function setFormValues() { | 238 | function setFormValues() { |
| 236 | setFieldsValue({ | 239 | setFieldsValue({ |
| 237 | field1: 1111, | 240 | field1: 1111, |
| 241 | + field4: ['1'], | ||
| 238 | field5: ['1'], | 242 | field5: ['1'], |
| 239 | field7: '1', | 243 | field7: '1', |
| 240 | field33: '2020-12-12', | 244 | field33: '2020-12-12', |