vue文件
<a-form>
<a-form-item :labelCol="labelCol"
:wrapperCol="wrapperCol"
label="适用阶段"
hasFeedback>
<a-select v-decorator="['mealCategory', {}]"
@blur="getMealCategory"
:disabled="isDisabled"
placeholder="请选择适用阶段">
<a-select-option value="小学">小学</a-select-option>
<a-select-option value="初中">初中</a-select-option>
<a-select-option value="高中">高中</a-select-option>
</a-select>
</a-form-item>
</a-form>
获取动作
methods: {
getMealCategory () {
this.mealCategory = this.form.getFieldValue('mealCategory');
console.log(`调用getMealCategory()--${this.mealCategory}`)
//将获取的学校类别传递给学校组件
this.$refs.activityMealSchoolTable.addGradeAndSchool(this.mealCategory);
}
}
详解:
this.form.getFieldDecorator(id, options) 和 v-decorator="[id, options]" #
经过 getFieldDecorator或v-decorator 包装的控件,表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:
你不再需要也不应该用 onChange 来做同步,但还是可以继续监听 onChange 等事件。
你不能用控件的 value defaultValue 等属性来设置表单域的值,默认值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
你不应该用 v-model,可以使用 this.form.setFieldsValue 来动态改变表单值。
注意:使用 getFieldsValue getFieldValue setFieldsValue 等时,应确保对应的 field 已经用 getFieldDecorator 或 v-decorator 注册过了。
为什么blur事件获取改变的值
适用change时间获取时具有延后性,暂时适用blur
站在巨人的肩膀上摘苹果:
https://blog.csdn.net/weixin_44051815/article/details/88305722
https://www.wandouip.com/t5i363134/