为了简单，直接引用ElementUI官网的例子，当需要绑定一个对象的时候直接给el-option的value属性设置为遍历集合的一个对象如下：
<template>
<el-select v-model="value3" disabled placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item"> <----------------此处 item 为一个对象--------------->
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value3: ''
}
}
}
</script>
程序能够正常执行
然后更改options对象的数据结构如下
options: [{
name: '选项1',
label: '黄金糕'
}, {
name: '选项2',
label: '双皮奶'
}, {
name: '选项3',
label: '蚵仔煎'
}, {
name: '选项4',
label: '龙须面'
}, {
name: '选项5',
label: '北京烤鸭'
}]
程序运行后发现所有下拉值为蓝色，也就是选中的状态。如下：
image.png
然后查了一下官网中api中有提到value-key这个属性，当绑定对象类型时必填，如：
image.png
接下来改造我们的代码，添加value-key为更改options集合对象后，对象所包含的name属性，如：
<el-select v-model="value3" disabled placeholder="请选择" value-key="name"><----------------指定value-key为数组对象中对象的name属性--------------->
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item"> <----------------此处 item 为一个对象--------------->
</el-option>
</el-select>
然后页面中显示出了正确结果，即只有一项选中态，如：
image.png
到这里就让我产生了困惑，为啥第一次没有指定value-key却也是正确的呢，于是，我打开了elemnt-ui的源码，其中在select.vue文件中找到了value-key定义的地方
image.png
终于真相大白，原来value-key默认值为value，所以在最上面options数据项结构为labe、value时能够正常显示，但是如果换成name，label就无法正常获得选中的值了。此时就需要去指定value-key为数据项结构的name或label属性（总之需要提供一个包含的属性名）
至此，为自己做一个记录，也为遇到相关问题的人提供一些帮助。
