el-select 进行分组，同时可以多层选择

<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="step-one-form" v-show="currentStep === 2">
    <el-select v-model="selected">
      <el-option-group v-for="group in options" :key="group.label" :label="group.label">
        <template v-if="group.children">
          <el-option-group
            v-for="subGroup in group.children"
            :key="subGroup.label"
            :label="subGroup.label"
            style="margin-left: 10px; color: red"
          >
            <el-option
              v-for="item in subGroup.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              style="margin-left: 10px"
            />
          </el-option-group>
        </template>
        <el-option
          v-else
          v-for="item in group.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          style="margin-left: 10px"
        />
      </el-option-group>
    </el-select>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  currentStep: {
    type: Number,
    default: 1
  }
})

const options = ref<any>([
  {
    label: "必须 *",
    id: 1,
    children: [
      {
        value: "lianxifangshi",
        label: "联系方式",
        isMore: true,
        options: [
          {
            value: "Shanghai",
            label: "邮箱"
          },
          {
            value: "Beijing",
            label: "电话"
          }
        ]
      },
      {
        value: "lianxiren",
        label: "联系人"
      }
    ]
  },
  {
    label: "非必选",
    id: 2,
    options: [
      {
        value: "Chengdu",
        label: "成都"
      },
      {
        value: "Shenzhen",
        label: "深圳"
      },
      {
        value: "Guangzhou",
        label: "广州"
      },
      {
        value: "Dalian",
        label: "大连"
      }
    ]
  }
])
const selected = ref<any>([])
</script>

<style scoped lang="scss"></style>