Ant Design Vue form结合label-in-value select组件出现的问题

8 篇文章 0 订阅
4 篇文章 0 订阅
在做表单提交时,我这边的需求是需要将select组件中的key作为id,value作为name传到后台。由于select组件默认无法同时获得key和value,所以,使用label-in-value属性来将key和value包装成一个object来获取。
          <a-select
            label-in-value
            :disabled="disabled"
            show-search
            v-decorator="[
              '组件注册id',
              {rules: [{required: true, message: '请进行选择'}]}
            ]"
            placeholder="请选择"
            @change="selectItemChange"
          >
            <a-select-option
              v-for="item in items"
              :key="item.id"
            >{{ item.name }}</a-select-option>
          </a-select>
添加上这条属性之后,就可以在验证表单的时候使用key和value两个值
  this.form.validateFieldsAndScroll((err, values) => {
    if (!err) {
        console.log('key: ' + values.组件注册id.key + 'value: ' + values.组件注册id.label)
    }
  })
这样做的话,又会面临另一个问题,我在给form赋初值的时候,由于一开始我直接将id赋进select组件,所以赋值语句是这样的
组件注册id: item.company_id
这样的话,在label-in-value模式下,就没有办法正常的将值赋进select组件。因为组件返回object类型,那么传值肯定也要是object类型才行了。于是,我将赋值改成了一下样子
组件注册id: item.company_id === undefined ? item.company_id : { 'key': item.id, 'label': item.name },
改成这样,就可以正常对form中的label-in-value 的select组件进行赋值了
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值