uviewplus组件库中的u-picker省市区的联级选择器

npm i element-china-area-data  //获取中国的省市区

<template>
	<u-picker ref="uPickerRef" :show="show" :mode="3" :loading="loading" :columns="columns" @change="onChange"
		@confirm='confirm'></u-picker>
</template>

<script setup>
	import {
		ref,
	} from 'vue';
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	//  npm i element-china-area-data  //获取中国的省市区
	import {
		regionData
	} from 'element-china-area-data';
	const loading = ref(false);
	const province = ref([]) //省
	const city = ref([]) //市
	const cityAll = ref([]) //所有市
	const area = ref([]) //区
	onLoad(() => {
		console.log(regionData);
		regionData.forEach(item => {
			province.value = [...province.value, item.label]
			item.children.forEach(val => {
				if (val.value == '1101') {
					val.children.forEach(e => {
						area.value = [...area.value, e.label]
					})
				}
				cityAll.value = [...cityAll.value, val]
			})
		})
		columns.value[0] = province.value
		columns.value[2] = area.value
	});
	const show = ref(true);
	const columns = ref([
		[],
		['市辖区'],
		[]
		// ['东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区'],
	])
	const uPickerRef = ref(null)
	const onChange = (e) => {
		city.value = []
		if (e.columnIndex == 0) {
			uPickerRef.value.setColumnValues(1, []);
			loading.value = true
			columns.value[2] = []
			area.value = []
			setTimeout(() => {
				// 四个直辖市需要单独判断（重庆除外）
				if (e.value[0] == '北京市') {
					columns.value[2] = []
					columns.value[1] = ['市辖区']
					regionData[0].children[0].children.forEach(item => {
						columns.value[2].push(item.label)
					})
				} else if (e.value[0] == '天津市') {
					columns.value[2] = []
					columns.value[1] = ['市辖区']
					regionData[1].children[0].children.forEach(item => {
						columns.value[2].push(item.label)
					})
				} else if (e.value[0] == '上海市') {
					columns.value[2] = []
					columns.value[1] = ['市辖区']
					regionData[10].children[0].children.forEach(item => {
						columns.value[2].push(item.label)
					})
				} else {
					columns.value[2] = []
					regionData.forEach(item => {
						if (item.label == e.value[0]) {
							item.children.forEach(val => {
								val.children.forEach(e => {
									columns.value[2].push(e.label)
								})
								city.value = [...city.value, val.label]
							})
							columns.value[1] = city.value
						}
					})
				}
				loading.value = false
			}, 1000)
		} else if (e.columnIndex == 1) {
			uPickerRef.value.setColumnValues(2, []);
			loading.value = true
			area.value = []
			setTimeout(() => {
				cityAll.value.forEach(item => {
					if (item.label == e.value[1]) {
						item.children.forEach(val => {
							area.value = [...area.value, val.label]
						})
						columns.value[2] = area.value
					}
				})
				loading.value = false
			}, 1000)
		}
	}
	const confirm = (e) => {
		console.log('选中的值', e.value);
	}
</script>