vue3TS中后台给你数据实现省市区实现三级联动

1. 点击省获取省的数据
2. 选择省的数据获取市区的数据（带你选择省的id给后台获取市）
3. 选择市的数据获取县区的数据（带你选择市区的id给后台获取县区）

前端代码

			<el-form-item>
				<el-select @change="handleProvinceChange" v-model="state.queryForm.province" clearable placeholder="所属省份"
					style="width: 250px">
					<el-option v-for="item in provinceList" :key="item.code" :label="item.name" :value="item.id" />
				</el-select>
			</el-form-item>

			<el-form-item>
				<el-select @change="handleCityChange" v-model="state.queryForm.city" clearable placeholder="所属城市"
					style="width: 250px">
					<el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.id" />
				</el-select>
			</el-form-item>

			<el-form-item>
				<el-select v-model="state.queryForm.county" clearable placeholder="所属县区" style="width: 250px">
					<el-option v-for="item in countyList" :key="item.code" :label="item.name" :value="item.id" />
				</el-select>
			</el-form-item>

js代码

// 获取省
interface provinceList {
	id: number
	name: string
	code: string
}
const provinceList = ref<Array<provinceList>>([]) // 省份的响应式数据
const getProvinceList = () => {
	return useCityApi().then(res => {
		provinceList.value = res.data


	})
}



// 获取市
interface cityList {
	id: number
	name: string
	code: string
}

const cityList = ref<Array<cityList>>([]) // 省份的响应式数据
// 监听省份选择变化
const handleProvinceChange = (provinceId: any) => {
	// 将选择的省份ID发送给后台接口进行处理
	return useCityApi1(provinceId).then((res: any) => {
		cityList.value = res.data


	}).catch((error: any) => {
		ElMessage({
			message: 'Congrats, this is a success message.',
			type: 'warning',
		})
	})
}


// 获取县区
interface countyList {
	id: number
	name: string
	code: string
}

const countyList = ref<Array<countyList>>([]) // 省份的响应式数据
// 监听省份选择变化
const handleCityChange = (provinceId: any) => {
	// 将选择的省份ID发送给后台接口进行处理
	return useCityApi1(provinceId).then((res: any) => {
		countyList.value = res.data


	}).catch((error: any) => {
		ElMessage({
			message: 'Congrats, this is a success message.',
			type: 'success',
		})
	})
}

有问题有疑问可以直接@本人，解决你的疑问