在做表单提交时,我这边的需求是需要将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组件进行赋值了