在做raido组件时,需要一个默认项,从官网拷贝过来,使用defaultValue没问题。

<a-radio-group v-model="value" @change="onChange">
        <a-radio-button value="a">
          Hangzhou
        </a-radio-button>
        <a-radio-button value="b">
          Shanghai
        </a-radio-button>
        <a-radio-button value="c">
          Beijing
        </a-radio-button>
        <a-radio-button value="d">
          Chengdu
        </a-radio-button>
      </a-radio-group>

但把v-model改为v-decorator就不行了,会报错误

`defaultValue` is invalid for `getFieldDecorator` will set `value`, please use `option.initialValue` instead

根据官网描述:

this.form.getFieldDecorator(id, options) 和 v-decorator="[id, options]" #

经过 getFieldDecoratorv-decorator 包装的控件,表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:

  1. 不再需要也不应该用 onChange 来做同步,但还是可以继续监听 onChange 等事件。
  2. 你不能用控件的 value defaultValue 等属性来设置表单域的值,默认值可以用 getFieldDecorator 或 v-decorator 里的 initialValue
  3. 你不应该用 v-model,可以使用 this.form.setFieldsValue 来动态改变表单值。

 

 

所以在使用v-decorator时需要在其中设置initialValue

<a-radio-group  v-decorator="['value', {initialValue: 'a'}, {rules: [{ required: true, message: '请选择' }]}]" @change="onChange">
  <a-radio-button value="a">
    Hangzhou
  </a-radio-button>
  <a-radio-button value="b">
    Shanghai
  </a-radio-button>
  <a-radio-button value="c">
    Beijing
  </a-radio-button>
  <a-radio-button value="d">
    Chengdu
  </a-radio-button>
</a-radio-group>

 

Logo

前往低代码交流专区

更多推荐