关于地址的级联选择器

news2025/2/24 5:15:47

相信大家在项目中经常要做关于地址的级联选择器：效果如下图
在这里插入图片描述
在常见的组件库，例如element-ui/element-plus等中就有关于级联选择器的使用，但该组件并没有封装好的关于中国省市区甚至更详细的关于地址的级联选择器，因此我尝试在网络中进行搜索

1.element-address

这个是类似一个二次封装的第三方包，它内部的组件是基于element-ui实现的，由于我自身项目是vue3用的是element-plus所以就没有用，如果你是安装了element-ui的vue2项目，可以用来试一试

https://gitee.com/asseek/element-address#%E6%8F%90%E4%BE%9B%E7%BB%84%E4%BB%B6
其中已经写了包括安装和使用的具体方法

注：该方法我在vue3的demo中试了不行一直报错可能是使用错误，希望后续有使用成功的小伙伴可以分享一下自己的成功经验

2.province-city-china

中华人民共和国行政区划代码，包含了中华人民共和国行政区划(五级)：省级、地级、县级、乡级和村级，来自中华人民共和国行政部，用于查询中国省、市和区数据的网站

https://www.npmjs.com/package/province-city-china 更详细的信息查看该网站

这里我以图一的效果图为例

实现我想要的效果首先要拿到中国的省、市、区这样的层级数据
在这里插入图片描述
根据该包的讲解中看到该文件列表在level.json中
在要使用数据的页面vue组件中隐形引入

<script>
import data from 'province-city-china/dist/level.json'
//打印一下data我们可以看到拿到了我们需要的层级，
</script>

在这里插入图片描述
但如果想要在 el-cascader 级联选择器中使用该数据，我们需要对数据进行处理，因为级联选择器选项的数据源，显示默认是label，取值默认是value，但我们目前的数据并不符合，但可以自定义，这里我需要显示name,获取的值也要是name，所以我要给每个数据源加上label和value属性，且值都为name
在这里插入图片描述
由于需要处理的值是多层级的，因此封装了一个方法进行递归循环

<template>
	<div>
		<el-cascader v-model="value" :options="areaList" />
	</div>
</template>
<script>
import data from 'province-city-china/dist/level.json'
export default{
	data(){
		return {
			value:[]
		}
	},
	computed:{
		areaList(){
			return this.setLabelAndValue(data)
		}
	},
	methods:{
		setLabelAndValue(arr){
			for(let i=0;i<arr.length;i++){
				arr[i].label=arr[i].name
				arr[i].value=arr[i].name
				if(arr[i].children){
					this.setLabelAndValue(arr[i].children)
				}
			}
			return arr
		}
	}
}
</script>