93 lines
2.2 KiB
Vue
93 lines
2.2 KiB
Vue
<cn>
|
||
#### 表单数据存储于上层组件
|
||
通过使用 `onFieldsChange` 与 `mapPropsToFields`，可以把表单的数据存储到上层组件。
|
||
**注意：**
|
||
`mapPropsToFields` 里面返回的表单域数据必须使用 `Form.createFormField` 包装。
|
||
上层组件传递的属性，必须在`Form.create({ props: ...})`的props中声明。
|
||
</cn>
|
||
|
||
<us>
|
||
#### Store Form Data into Upper Component
|
||
We can store form data into upper component.
|
||
**Note:**
|
||
You must wrap field data with `Form.createFormField` in `mapPropsToFields`.
|
||
The properties passed by the upper component must be declared in the props of `Form.create({ props: ...})`.
|
||
</us>
|
||
|
||
|
||
<script>
|
||
import { Form } from 'ant-design-vue'
|
||
|
||
const CustomizedForm = Form.create({
|
||
props: ['username'], // must declare like vue `props` https://vuejs.org/v2/api/#props
|
||
onFieldsChange (instance, changedFields) {
|
||
instance.$emit('change', changedFields)
|
||
},
|
||
mapPropsToFields (props) {
|
||
return {
|
||
username: Form.createFormField({
|
||
...props.username,
|
||
value: props.username.value,
|
||
}),
|
||
}
|
||
},
|
||
onValuesChange (_, values) {
|
||
console.log(values)
|
||
},
|
||
})({
|
||
render () {
|
||
const { getFieldDecorator } = this.form
|
||
return (
|
||
<a-form layout='inline'>
|
||
<a-form-item label='Username'>
|
||
{getFieldDecorator('username', {
|
||
rules: [{ required: true, message: 'Username is required!' }],
|
||
})(<a-input />)}
|
||
</a-form-item>
|
||
</a-form>
|
||
)
|
||
},
|
||
|
||
})
|
||
|
||
export default {
|
||
data () {
|
||
return {
|
||
fields: {
|
||
username: {
|
||
value: 'benjycui',
|
||
},
|
||
},
|
||
}
|
||
},
|
||
methods: {
|
||
handleFormChange (changedFields) {
|
||
this.fields = { ...this.fields, ...changedFields }
|
||
},
|
||
},
|
||
|
||
render () {
|
||
const fields = this.fields
|
||
return (
|
||
<div id='components-form-demo-global-state'>
|
||
<CustomizedForm {...{ props: fields }} onChange={this.handleFormChange} />
|
||
<pre class='language-bash'>
|
||
{JSON.stringify(fields, null, 2)}
|
||
</pre>
|
||
</div>
|
||
)
|
||
},
|
||
}
|
||
</script>
|
||
<style>
|
||
#components-form-demo-global-state .language-bash {
|
||
max-width: 400px;
|
||
border-radius: 6px;
|
||
margin-top: 24px;
|
||
}
|
||
</style>
|
||
|
||
|
||
|
||
|