用element ui 写一个分组下拉框

你可以使用 Element UI 的 `el-select` 组件和 `el-optgroup` 组件来实现分组下拉框。具体实现步骤如下：

1. 在 `el-select` 标签中，使用 `el-optgroup` 标签来实现分组，`el-optgroup` 标签需要设置 `label` 属性来表示分组的名称。
2. 在 `el-optgroup` 标签中，使用 `el-option` 标签来表示分组下的每一个选项，`el-option` 标签需要设置 `label` 属性来显示选项名称，`value` 属性来表示选项的值。

下面是一个示例代码，该代码实现了一个分组下拉框，其中包含两个分组，每个分组下面各有两个选项：

<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <el-optgroup label="水果">
      <el-option label="苹果" value="apple"></el-option>
      <el-option label="香蕉" value="banana"></el-option>
    </el-optgroup>
    <el-optgroup label="蔬菜">
      <el-option label="西红柿" value="tomato"></el-option>
      <el-option label="胡萝卜" value="carrot"></el-option>
    </el-optgroup>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: ''
    }
  }
}
</script>

在上面的代码中，我们定义了一个 `el-select` 组件，并在其中定义了两个 `el-optgroup` 组件，每个 `el-optgroup` 组件中包含两个 `el-option` 组件，最终实现了一个分组下拉框。