為了簡單，直接引用ElementUI官網(wǎng)的例子，當(dāng)需要綁定一個(gè)對象的時(shí)候直接給el-option的value屬性設(shè)置為遍歷集合的一個(gè)對象如下：

<template>
<el-select v-model="value3" disabled placeholder="請選擇">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item">        <----------------此處 item 為一個(gè)對象--------------->
    </el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        options: [{
          value: '選項(xiàng)1',
          label: '黃金糕'
        }, {
          value: '選項(xiàng)2',
          label: '雙皮奶'
        }, {
          value: '選項(xiàng)3',
          label: '蚵仔煎'
        }, {
          value: '選項(xiàng)4',
          label: '龍須面'
        }, {
          value: '選項(xiàng)5',
          label: '北京烤鴨'
        }],
        value3: ''
      }
    }
  }
</script>

程序能夠正常執(zhí)行
然后更改options對象的數(shù)據(jù)結(jié)構(gòu)如下

options: [{
          name: '選項(xiàng)1',
          label: '黃金糕'
        }, {
          name: '選項(xiàng)2',
          label: '雙皮奶'
        }, {
          name: '選項(xiàng)3',
          label: '蚵仔煎'
        }, {
          name: '選項(xiàng)4',
          label: '龍須面'
        }, {
          name: '選項(xiàng)5',
          label: '北京烤鴨'
        }]

程序運(yùn)行后發(fā)現(xiàn)所有下拉值為藍(lán)色，也就是選中的狀態(tài)。如下：

image.png

然后查了一下官網(wǎng)中api中有提到value-key這個(gè)屬性，當(dāng)綁定對象類型時(shí)必填，如：

image.png

接下來改造我們的代碼，添加value-key為更改options集合對象后，對象所包含的name屬性，如：

<el-select v-model="value3" disabled placeholder="請選擇" value-key="name"><----------------指定value-key為數(shù)組對象中對象的name屬性--------------->
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item">        <----------------此處 item 為一個(gè)對象--------------->
    </el-option>
  </el-select>

然后頁面中顯示出了正確結(jié)果，即只有一項(xiàng)選中態(tài)，如：

image.png

到這里就讓我產(chǎn)生了困惑，為啥第一次沒有指定value-key卻也是正確的呢，于是，我打開了elemnt-ui的源碼，其中在select.vue文件中找到了value-key定義的地方

image.png