vue ant design中关于给select设置初始默认值的问题(initialValue无效、用defaultValue则报`defaultValue` is invalid错误)(已解决)

问题:当我们在用vue ant design给select设置默认值时,如果采用v-decorator的方式去注册控件,且要对表单内容进行校验,那么这个时候无论是如下边错误1一样使用defaultValue=“2”这样来设置默认值,还是如同错误2一样使用initialValue: 2来进行设置,还是如同错误3一样使用:value="2"这样设置了值却无法注册typeId,都会设置无效或者报错等等,这个时候,如果采用setFieldsValue来对其进行赋值,就可以完好的解决该问题了。

错误代码1:

<a-select placeholder="请选择" class="default-input" v-decorator="['typeId', {rules: [{ required: true, message: '请选择' }]}]" defaultValue="2">
  <a-select-option key="1" value="1">1</a-select-option>
  <a-select-option key="2" value="2">2</a-select-option>
</a-select>

错误代码2:

<a-select showSearch placeholder="请选择" class="default-input" v-decorator="['typeId', {rules: [{ required: true, message: '请选择' }]}, { initialValue: 2 }]">
  <a-select-option key="1" value="1">1</a-select-option>
  <a-select-option key="2" value="2">2</a-select-option>
</a-select>

错误代码3:

<a-select placeholder="请选择" class="default-input"  :value="2">
  <a-select-option key="1" value="1">1</a-select-option>
   <a-select-option key="2" value="2">2</a-select-option>
 </a-select>

正确方案:
html部分

<a-select placeholder="请选择" class="default-input" v-decorator="['typeId', {rules: [{ required: true, message: '请选择' }]}]">
   <a-select-option key="1" value="1">1</a-select-option>
   <a-select-option key="2" value="2">2</a-select-option>
 </a-select>

script部分

data () {
   return {
     form: this.$form.createForm(this)
    }
},
mounted(){
  this.form.setFieldsValue({
      "typeId": "2",
  })
}

这样一来,既可以注册控件,有能直白的直接在空间里边写入校验,还能对其进行初始赋值。
PS:小编系vue ant design菜鸟一枚,此为学习比较,这可能是最没有技术含量的写法了,如果大家有更好的方案和建议,烦请指点一二。

  • 10
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值