a-select设置默认值

a-select设置默认值(Ant Design&Vue)

以下方式都不好用：
defaultValue
default-value=“lucy”
:default-value="{ key: ‘lucy’ }"

网上查询v-model方法，也不好用。

<a-select
    placeholder="请选择入库类型"
     v-model="queryParam.status"
  >
    <a-select-option value="4" > 退料入库 </a-select-option>
    <a-select-option value="5"> 退货入库 </a-select-option>
  </a-select>

data() {
    return {
           queryParam: { status: 4},
      }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

前台报出警告：
getFieldDecorator will override value, so please don’t set value and v-model directly and use setFieldsValue to set it.

正确写法使用getFieldDecorator：

<a-select
      v-decorator="['source', validatorRules.source]"
       @change="changeType"
       placeholder="请选择入库类型"
       :disabled="typeDisabled"
     >
       <a-select-option value="4" > 退料入库 </a-select-option>
       <a-select-option value="5"> 退货入库 </a-select-option>
</a-select>

  created() {
    this.form.getFieldDecorator('source', {
            initialValue: '4'})
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

============================
后来查看了官方文档，内容更加详细准确。
参见：https://www.antdv.com/components/form-cn/#API

Form 表单
具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素

创建表单
Form.create(options) | this.$form.createForm(this, options)

经过 Form.create 包装的组件将会自带 this.form 属性，this.form 提供的 API 如下：

注意：使用 getFieldsValue getFieldValue setFieldsValue 等时，应确保对应的 field 已经用 getFieldDecorator 或 v-decorator 注册过了。（本人理解组件添加v-decorator属性）

getFieldDecorator
用于和表单进行双向绑定，单文件 template 可以使用指令v-decorator进行绑定，
设置初始值代码也可以写成以下形式：

<a-form :form="form">
        <a-form-item label="入库类型" :labelCol="labelCol" :wrapperCol="wrapperCol">

          <a-select
            v-decorator="['source',  { initialValue: '4' } ,validatorRules.source]"
            @change="changeType"
            placeholder="请选择入库类型"
            :disabled="typeDisabled"
          >
            <a-select-option value="4" > 退料入库 </a-select-option>
            <a-select-option value="5"> 退货入库 </a-select-option>
          </a-select>
        </a-form-item>
 </form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

【注意】
this.form.getFieldDecorator(id, options) 和 v-decorator="[id, options]"

经过 getFieldDecorator或v-decorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

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

这解释了文章开头，各种设置方式不好用的原因。