Ant Design Vue中a-select如何处理value为对象

2,099 阅读1分钟

前言:本人之前用的是element ui和plus,其中el-select有一个value-key的属性,加了以后value即可绑定为一个对象,使用例子大概如下

<el-select
    :disabled="actionType == 'edit'"
    value-key="id"
    placeholder=""
    clearable
    v-model="formData.partnerName"
    @change="setPartnerItem">
    <el-option
        v-for="(item, index) in partnerOptions"
        :key="index"
        :label="item.name"
        :value="item"></el-option>
</el-select>
//通过change函数将绑定的对象,赋值给其他元素
	function setPartnerItem(item) {
		nextTick(() => {
			formData.value.partnerName = item.name
			formData.value.regionalManager = item.regionalManager
			formData.value.bankName = item.bankName
		})
	}

转到Ant之后发现a-select并没有value-key这种东西,value直接写对象会直接报渲染级别错误导致卡死,研究后发一个可行的方案。 a-select加上label-in-value属性,作用把每个选项的 label 包装到 value 中

<a-select
    v-model="changeData"
    label-in-value
    :options="options"
    @change="handleChange"
    ></a-select>

通过接口获取的list一般是个数组,map之后变成下面这种格式,value和label供展示,后面的item是整个对象

    const changeData = ref()
    const options = ref([
		{ value: 1, label: '选项一', item: { name: 选项一, age: 1, type: '男' } },
		{ value: 2, label: '选项二', item: { name: 选项二, age: 2, type: '男' } },
		{ value: 3, label: '选项三', item: { name: 选项三, age: 3, type: '男' } },
		{ value: 4, label: '选项四', item: { name: 选项四, age: 4, type: '女' } },
		{ value: 5, label: '选项五', item: { name: 选项五, age: 5, type: '女' } }
	])

准备好数据之后,来写change事件吧,将item打出来看一下,发现change函数返回的不再是value了,而是整个选项

    function handleChange(item) {
        console('change之后的选项值',item)
        //{ "label": "选项一", 
            "value": 1, "key": 1, 
            "option": { "value": 1, "label": "选项一",
            "item": { "name": "选项一", "age": 1, "type": "男" } }, 
            "originLabel": "选项一" } 
         //有对象就好办了,直接把值赋给其他的元素
		inputData1.value = item.option.item.name
		inputData2.value = item.option.item.age
		inputData3.value = item.option.item.type
	}