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/

上一篇:一文带你了解 TreeMap ,LinkedHashMap 的主要特点


下一篇:总结oninput、onchange与onpropertychange事件的使用方法和差别