69 lines
1.7 KiB
Vue
69 lines
1.7 KiB
Vue
|
<cn>
|
||
|
|
#### 表单联动
|
||
|
|
使用 `setFieldsValue` 来动态设置其他控件的值。
|
||
|
|
</cn>
|
||
|
|
|
||
|
|
<us>
|
||
|
|
#### Coordinated Controls
|
||
|
|
Use `setFieldsValue` to set other control's value programmaticly.
|
||
|
|
</us>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
|
||
|
|
<a-form-item label="Note">
|
||
|
|
<a-input
|
||
|
|
v-decorator="['note', { rules: [{ required: true, message: 'Please input your note!' }] }]"
|
||
|
|
/>
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item label="Gender">
|
||
|
|
<a-select
|
||
|
|
v-decorator="[
|
||
|
|
'gender',
|
||
|
|
{ rules: [{ required: true, message: 'Please select your gender!' }] },
|
||
|
|
]"
|
||
|
|
placeholder="Select a option and change input text above"
|
||
|
|
@change="handleSelectChange"
|
||
|
|
>
|
||
|
|
<a-select-option value="male">
|
||
|
|
male
|
||
|
|
</a-select-option>
|
||
|
|
<a-select-option value="female">
|
||
|
|
female
|
||
|
|
</a-select-option>
|
||
|
|
</a-select>
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
|
||
|
|
<a-button type="primary" html-type="submit">
|
||
|
|
Submit
|
||
|
|
</a-button>
|
||
|
|
</a-form-item>
|
||
|
|
</a-form>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
formLayout: 'horizontal',
|
||
|
|
form: this.$form.createForm(this, { name: 'coordinated' }),
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleSubmit(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
this.form.validateFields((err, values) => {
|
||
|
|
if (!err) {
|
||
|
|
console.log('Received values of form: ', values);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
handleSelectChange(value) {
|
||
|
|
console.log(value);
|
||
|
|
this.form.setFieldsValue({
|
||
|
|
note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|