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

红太狼 2021-08-14 00:38 465阅读 0赞

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

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

![format_png][]

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

![format_png 1][]

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

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

![format_png 2][]

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

![format_png 3][]

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

[format_png]: /images/20210813/eec2fbcb07bb4dbe8486d54b0325b762.png
[format_png 1]: /images/20210813/2c134513b26c40a1aa85115e9235dc64.png
[format_png 2]: /images/20210813/18611ac94a8249e39f717c5357e03ad5.png
[format_png 3]: /images/20210813/82e5cff8361a4983abbce37c58679856.png