写在前面
最后还是忘记了，一个重要的点，以为写完了，都开始着手写react的教程了，好家伙，一个问题给我打回原形，粉丝们问发什么什么事了，原来是csdn博客里面的一个问题，我说select中绑定的值和你选择的值是一一对应的，你绑定了一个值就可以，对应的项element会直接帮你反显出来，这么是没有问题的，但是他满足不了很多的业务情况， 比如下面的例子！
效果展示
效果描述
比如说我选择了一个中国，那么我希望的是拿到关于中国的所有的基本信息，名称，所属的大洲，人口等信息，那我们知道，一般情况下我们都是直接绑定一个值，要不就是绑定名称，要不就是大洲，要不就是人口，你现在全部都要，这可咋整， 不找着急，这篇文章就是为了解决这个问题，我们想如果我选择的时候绑定了当前被选择的对象不就好了嘛，查文档！
代码
代码语言：javascript复制<template>
<div>
<h3><span>国家:</span>{{country.name}}-<span>大洲:</span>{{country.continent}}-<span>人口:</span>{{country.population}}</h3>
<br/>
<el-select @change="currItem" v-model="country" value-key="id">
<el-option value="" label="请选择" />
<el-option v-for="item in countryLlist" :key="item.id" :label="item.name" :value="item">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
msg: "hello select",
countryLlist: [{
id:0,
name: "中国",
label: 'china',
continent: "亚洲",
population:"14亿（2019年）"
}, {
id:1,
name: "美国",
label: 'America',
continent: "美洲",
population:"3.32亿（2020年）"
}, {
id:2,
name: "英国",
label: 'England',
continent: "欧洲",
population:"6679.68万（2019年）"
}],
country: {}
}
},
created() {
//初始化默认对象
this.country = {
id:1,
name: "美国",
label: 'America',
continent: "美洲",
}
},
methods: {
currItem() {
console.log(this.country)
}
}
}
</script>
<style>
</style>注意的点⚠️
1、我们需要绑定一个对象，也就是说，既然你选择的时候希望被选择的是整个对象，那么你初始化的时候return中的初始化的值就应该是一个对象，而不是一个string的字符串 2、绑定以后对象中的对应的列可以完全和原数据对应，这是最好的，但是如果不对应也不是完全不可以，用不到的可以不对应的， 但是你的value-key一定要存在且对应，不然数据就没办法反显！ 3、为了体现反显，我在数据加载的时候就直接给对象赋值了，所以你们打开以后看到的效果就是这样的，美国被选中，因为我初始化的就是美国 id是1的。
4、是不是一定要用id呢，推荐这么用，但是你非要用别的也可以，但是要和对象中的数据对应就可以，比如你的value-key=“label” 那么你的label就一定要存在且对应！ 以后还有什么问题的话，就私信问我就好了！看到了问题不大就回答了，问题比较频繁的就直接写一篇文章说明！收工
