当前位置: 首页 > 工具软件 > Label In > 使用案例 >

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

终彬郁
2023-12-01
在做表单提交时,我这边的需求是需要将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组件进行赋值了
 类似资料: