关于ElementUI el-select 绑定对象的探索

为了简单，直接引用ElementUI官网的例子，当需要绑定一个对象的时候直接给el-option的value属性设置为遍历集合的一个对象如下：

程序能够正常执行
然后更改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属性，如：

<----------------指定value-key为数组对象中对象的name属性--------------->
            <----------------此处 item 为一个对象--------------->
    
  

然后页面中显示出了正确结果，即只有一项选中态，如：

image.png

到这里就让我产生了困惑，为啥第一次没有指定value-key却也是正确的呢，于是，我打开了elemnt-ui的源码，其中在select.vue文件中找到了value-key定义的地方

image.png

终于真相大白，原来value-key默认值为value，所以在最上面options数据项结构为labe、value时能够正常显示，但是如果换成name，label就无法正常获得选中的值了。此时就需要去指定value-key为数据项结构的name或label属性（总之需要提供一个包含的属性名）
至此，为自己做一个记录，也为遇到相关问题的人提供一些帮助。