前言:本人之前用的是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
}