element分组选择器 el-select 用 value-key 获取循环中的子对象

 Element  Select分组选择器的结构如下：

<el-select >
    <el-option-group >
      <el-option></el-option>
    </el-option-group>
</el-select>

Select分组选择器的基础用法（不使用 value-key ）： 

• <el-select> 标签上用 v-model 绑定一个变量，用来显示我们看到的值；
• <el-option-group> 标签上使用 v-for 绑定数组进行循环；
• <el-option> 标签是循环的 item，:value 绑定选项的值。
• 官方文档：https://element.eleme.cn/#/zh-CN/component/select

<el-select v-model="bindValue" placeholder="请选择城市">
  <el-option-group v-for="group in cityList" :key="group.label" :label="group.label">
    <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value" ></el-option>
  </el-option-group>
</el-select>

data 中数据格式：

  cityList: [
        {
          label: "热门城市",
          options: [
            {
              value: "Shanghai",
              label: "上海",
            },
            {
              value: "Beijing",
              label: "北京",
            },
          ],
        },
        {
          label: "城市名",
          options: [
            {
              value: "Chengdu",
              label: "成都",
            },
            {
              value: "Shenzhen",
              label: "深圳",
            },
            {
              value: "Guangzhou",
              label: "广州",
            },
          ],
        },
      ],

用 watch 监视 bindValue 值的变化：

 watch: {
    bindValue(newValue, oldValue) {
      console.log({ newValue });
      console.log({ oldValue });
    }
  }

 运行结果：

Select分组选择器（使用 value-key ）： 

 如果想获取的不是 “Shanghai”、“Beijing”这样的数值，而是  {value: "Beijing",label: "北京"} 这样的对象，那么就要 el-select 的 value-key 属性了。

<el-select v-model="bindValue" placeholder="请选择" value-key="value">
  <el-option-group v-for="group in cityList" :key="group.label" :label="group.label">
    <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item" ></el-option>
  </el-option-group>
</el-select>

• <el-option > 标签上 :value 绑定的不再是单个变量值，而是一个对象 item={value: "Shanghai",label: "上海"}
• <el-select> 标签上增加 value-key 属性（前面不加冒号），后面引号中的内容是<el-option > 中绑定的item对象的属性名字（值有唯一性的属性）。
• 这里 item={value: "Shanghai",label: "上海"}，所以 <el-select> 上可以写 value-key="value" ，也可以写 value-key="label"

运行结果如下：

 

 全部代码：

demo.vue

<template>
  <div>
    <!-- 不使用 value-key -->
    <!-- <el-select v-model="bindValue" placeholder="请选择城市">
      <el-option-group v-for="group in cityList" :key="group.label" :label="group.label">
        <el-option
          v-for="item in group.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-option-group>
    </el-select> -->

    <!-- 使用 value-key -->
    <el-select v-model="bindValue" placeholder="请选择" value-key="label">
      <el-option-group v-for="group in cityList" :key="group.label" :label="group.label">
        <el-option
          v-for="item in group.options"
          :key="item.value"
          :label="item.label"
          :value="item"
        ></el-option>
      </el-option-group>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cityList: [
        {
          label: "热门城市",
          options: [
            {
              value: "Shanghai",
              label: "上海",
            },
            {
              value: "Beijing",
              label: "北京",
            },
          ],
        },
        {
          label: "城市名",
          options: [
            {
              value: "Chengdu",
              label: "成都",
            },
            {
              value: "Shenzhen",
              label: "深圳",
            },
            {
              value: "Guangzhou",
              label: "广州",
            },
          ],
        },
      ],
      bindValue: "",
    };
  },
  watch: {
    bindValue(newValue, oldValue) {
      console.log({ newValue });
      console.log({ oldValue });
    },
  },
};
</script>