ant design获取表单中适用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 () {
      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/