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

为了简单，直接引用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: '北京烤鸭'
        }]

程序运行后发现所有下拉值为蓝色，也就是选中的状态。如下：

 

然后查了一下官网中api中有提到value-key这个属性，当绑定对象类型时必填，如：

 

 

接下来改造我们的代码，添加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>

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

 

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

 

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