Skip to content

Commit 90eae03

Browse files
authored
feat(Form): add models attribute (#544)
* feat(Form): add models attribute * chore: optimize the compatibility of modelKey attribute
1 parent 554a499 commit 90eae03

File tree

10 files changed

+216
-150
lines changed

10 files changed

+216
-150
lines changed

demo/Form/modelKey.vue demo/Form/models.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export default defineComponent({
3838
label: 'Use in the ProForm',
3939
prop: 'value',
4040
component: markRaw(MyInput),
41-
modelKey: 'value', // or ['value', 'onUpdate:value']
41+
models: [{ prop: 'value', key: 'value', event: 'update:value' }],
4242
},
4343
])
4444
const submit = defineFormSubmit((done, isValid, invalidFields) => {

docs/en-US/components/Form.md

+10-4
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,16 @@ Local component can be passed directly through `component` in `columns` attribut
6161

6262
### Configure the v-model arguments for component
6363

64-
By default, the ProForm component only supports components that bind values through `v-model`. If you need to use other arguments to bind values, you can configure it through `modelKey`.
64+
By default, the ProForm component only supports components that bind values through `v-model`. If you need to use other arguments to bind values, you can configure it through `models`. When `models` is specified, the `prop` attribute will be ignored (the binding implemented by `v-model` will be invalid), and you need to pass `{ prop: [prop], key: 'modelValue' }` to `models` to implement the binding.
6565

66-
::: demo In addition to supporting strings, modelKey also supports passing in `[prop, event]` (`prop` is used to configure the parameters of the bound value, `event` is used to configure the event of the bound value)
67-
@/demo/Form/modelKey.vue
66+
In addition, `models` can also be used to bind multiple parameters to a component
67+
68+
::: tip
69+
Since `1.4.0`, the `modelKey` attribute has been deprecated, please use the `models` attribute instead
70+
:::
71+
72+
::: demo prop: the name of the bound field, key: the parameter used to configure v-model, event: the event used to configure the bound value
73+
@/demo/Form/models.vue
6874
:::
6975

7076
### Slots
@@ -236,7 +242,7 @@ The function `defineFormColumns` supports passing in a Generics type to infer th
236242
| label | label text | string | - | - |
237243
| component | binding component | string | - | - |
238244
| props | transfer `props` to the current component | object | - | - |
239-
| modelKey | the arguments name bound to the `v-model` of the current component | string / [string, string] | - | - |
245+
| models | Configure the `v-model` binding parameters of the component corresponding to the current item (Array<{ prop, key, event }>) | array | - | - |
240246
| children | group form or sub-form content | array | - | - |
241247
| type | type of children internal forms | string | array / group / tabs / collapse / steps | array |
242248
| max | limit the maximum number of `type=array` | number | - | - |

docs/en-US/components/Search.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ The function `defineSearchColumns` supports passing in a Generics type to infer
8585
| label | label text | string | - | - |
8686
| component | binding component | string | - | - |
8787
| props | transfer `props` to the current component | object | - | - |
88-
| modelKey | the arguments name bound to the `v-model` of the current component | string / [string, string] | - | - |
88+
| models | Configure the `v-model` binding parameters of the component corresponding to the current item (Array<{ prop, key, event }>) | array | - | - |
8989
| children | group form or sub-form content | array | - | - |
9090
| type | type of children internal forms | string | array / group / tabs / collapse / steps | array |
9191
| max | limit the maximum number of `type=array` | number | - | - |

0 commit comments

Comments
 (0)