Cree una selección de dirección de tres niveles basada en el-cascader del elemento ui

Crear componente de dirección mz-address-select

<template>
	<el-cascader :style="{width:width}" :placeholder="placeholder" v-model="tempAddress" :options="addressList"
		:props="optionProps" @change="addressChangeHandle"></el-cascader>
</template>

<script>
	export default {
		props: {
			//回显值
			value: {
				type: Array,
				default: () => {
					return []
				}
			},
			//设置宽度
			width: {
				type: String,
				default: "100%"
			},
			placeholder: {
				type: String,
				default: "请选择地址"
			}
		},
		data() {
			return {
				addressList: [], //地址数据
				optionProps: {
					value: 'value',
					label: 'label',
					children: 'children',
					expandTrigger: 'click'
				}, //配置项
				tempAddress: [], //临时地址
			}
		},
		watch: {
			value: {
				handler(value) {
					console.log("[监听到的值]", value)
					this.tempAddress = value;
				}, //监听函数
				deep: true, //深度监听
				immediate: true, //立即执行
			}
		},
		mounted() {
			this.addressListAPI();
		},
		methods: {
			/**
			 * 选择地址
			 * **/
			addressChangeHandle(params) {
				this.$emit("change", params)
			},
			/**
			 * 获取地址数据
			 * address.json我在uniapp中使用picker制作简单的三级地址选择组件 中有数据
			 * **/
			addressListAPI() {
				this.requestAPI("https://xxxx.com/address.json", (response) => {
					this.dealWithAPIData(response.res).then(res => {
						this.addressList = res;
					});
				})
			},
			/**
			 * 整理接口数据
			 * **/
			dealWithAPIData(data) {
				return new Promise((resolve, reject) => {
					if (data.length > 0) {
						let tempData = [];
						data.map(item => {
							if (item.cityList.length > 0) {
								tempData.push({
									value: item.id,
									label: item.name,
									children: item.cityList.map(city => {
										return {
											value: city.id,
											label: city.name,
											children: city.areaList.map(area => {
												return {
													value: area.id,
													label: area.name,
												}
											})
										}

									})
								})

							} else {
								tempData.push({
									value: item.id,
									label: item.name,
									children: [{
										value: item.id,
										label: item.name,
										children: [{
											value: item.id,
											label: item.name,
										}]
									}]
								})
							}

						})
						resolve(tempData);
					} else {
						reject([]);
					}
				})
			},
			/**
			 * API请求
			 * **/
			async requestAPI(url, callback) {
				const xhr = await new XMLHttpRequest();
				xhr.open('GET', url, true);
				xhr.onreadystatechange = function() {
					if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成且响应成功
						const data = JSON.parse(xhr.responseText); // 解析响应数据为 JSON 对象
						callback(data);
					}
				};
				xhr.send();
			}
		}
	}
</script>

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

Registre componentes directamente en la página o regístrese globalmente en main.js