antdesign获取表单中适⽤v-decorator修饰表单中的值
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 () {
console.log(`调⽤getMealCategory()--${alCategory}`)
/
/将获取的学校类别传递给学校组件
this.$refs.activityMealSchoolTable.alCategory);
}
}antdesignvue 配置外部文件
详解:
FieldDecorator(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
站在巨⼈的肩膀上摘苹果: