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 绑定选项的值。
• 官方文档：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>