vue3 所有国家地区选择 + 男女选择

Vue 3 提供了很多组件库可以使用，其中 Element Plus 是一个比较流行的组件库，它提供了 Cascader（级联选择器） 和 Radio（单选框） 组件可以用来实现国家地区选择和男女选择功能。

国家地区选择：

使用 Cascader 组件实现国家地区选择功能，可以通过配置 options 属性来设置级联选择器的选项列表，示例代码如下：

<template>
  <el-cascader
    v-model="selectedRegion"
    :options="regions"
    :props="{
      expandTrigger: 'hover',
      value: 'code',
      label: 'name',
      children: 'children'
    }"
    placeholder="请选择国家/地区"
  ></el-cascader>
</template>

<script>
import regionsData from '@/data/regions.json'

export default {
  data() {
    return {
      regions: regionsData,
      selectedRegion: []
    }
  }
}
</script>

其中，regionsData 是一个包含所有国家/地区信息的数组，可以从一个 JSON 文件中加载。selectedRegion 是一个数组，用来存储用户选择的国家/地区编码。

男女选择：

使用 Radio 组件实现男女选择功能，可以通过配置 label 属性来设置单选框的文本，示例代码如下：

<template>
  <el-radio-group v-model="selectedGender">
    <el-radio label="male">男</el-radio>
    <el-radio label="female">女</el-radio>
  </el-radio-group>
</template>

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

其中，selectedGender 是一个字符串，用来存储用户选择的性别。