正常情况下的el-select：
<el-select
v-model="obj.like"
placeholder="请选择"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<script>
export default {
data() {
return {
obj: {
like: ''
},
options: [
{ value: 'HTML', label: 'HTML' },
{ value: 'CSS', label: 'CSS' },
{ value: 'JavaScript', label: 'JavaScript' }
],
}
}
} ,
methods: {
changeFun( val ) {
console.log(val) // 输出 options 中选中项的 value
}
}
</script>
加了 value-key 的 el-select 用法
（改动处前方添加*号）
改动处为：
el-select 新增 :value-key="value"
el-option 将 :value="item.value" 修改为 :value="item"
<el-select
v-model="obj.like"
* :value-key="value"
placeholder="请选择"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
* :value="item"
>
</el-option>
</el-select>
<script>
export default {
data() {
return {
obj: {
like: ''
},
options: [
{ value: 'HTML', label: 'HTML' },
{ value: 'CSS', label: 'CSS' },
{ value: 'JavaScript', label: 'JavaScript' }
],
}
}
} ,
methods: {
changeFun( val ) {
console.log(val) // 输出 options 中选中项的 对象
// 如 ：{ value: 'JavaScript', label: 'JavaScript' }
// 这样就能轻易获取选中的对象了
}
}
</script>
情况说明
value-key默认绑定value，所以如果你的options数组元素的对象中的有效值（传给后端的值，就叫他有效值把）为value，那么不写value-key也是ok的。
但如果你的有效值是其他字段，比如id什么的，那必须注明:value-key="id",不然找不到value的话，value值就是undefined，options中每一个对象的value都是undefined，都是一样的，那么选中一个，其他下拉选项也会显示【被选中】的状态
