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},
      }
}

前台报出警告:
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'})
  },

============================
后来查看了官方文档,内容更加详细准确。
参见: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>

【注意】
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 来动态改变表单值。

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

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值