这里用到的是Element Plus的级联选择器

先看效果图：

1. 省市二级联动数据：

2. 省市区三级联动数据：

下面是实现过程：

1. 安装依赖：

npm install element-china-area-data -S

2. 使用数据：

• provinceAndCityData是（不带“全部”选项）的省市二级联动数据
• regionData是（不带“全部”选项）的省市区三级联动数据
• provinceAndCityDataPlus是（带“全部”选项）的省市二级联动数据
• regionDataPlus是（带“全部”选项）的省市区三级联动数据
• “全部"选项的value为空

3. 案例代码（以省市区三级联动为例）：

<template>
	<div class="flex-1 text-center">
		选择地区：
		<el-cascader
			style="width: 240px"
			:options="optionsArr"
			v-model="selectedOptions"
			clearable
			placeholder="请选择地区"
			@change="handleSearch"
		></el-cascader>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { regionData} from 'element-china-area-data';
const selectedOptions = ref([]);
const optionsArr = ref(regionData);

const handleSearch = (e: any) => {
	console.log(e);
};
</script>

Your dreams truly matter; pursue them with relentless passion every day.