前段时间在vue项目中有需求要用到中国省市区级联选择框，因为在其他博客见到有现成的插件element-china-area-data，于是到npm里看了一下这个包，蛮符合项目需求的，于是就用了。结果这两天就出问题了，测试老姐给我提了bug：级联选择框中某些市级的下级区里出现了缺省，例如深圳市就少了光明区、龙华区等等
如下图所示
吓得我光速TP去npm看了一下这个包多久没更新了
原来这个包最后一次更新已经是一年前了，再看看用的行政区数据源
数据源已经三年没有更新了所以这三年来中国省市区的变化在这里是没有更新的，起初我尝试寻找备胎替代品上位，找了一圈实在没什么亮眼的，我的导师也点醒了我，就算让我找到了合适的替代品以后也是有隐患的，万一哪一天也像这个插件一样很长时间不更新那又要陷入套娃游戏找替代品了。
于是决定用
高德地图的web服务api直接获取最新的行政区查询数据直接拿最新也最全的数据自己写个组件不香吗？下面是实现的代码
先写一个级联选择框
<el-form label-width="80px"
:model="addPointForm">
<el-form-item label="地址"
:required="true">
<el-cascader size="large"
ref="addPoint"
placeholder="请选择"
:props="cityProps"
:options="cityOptions"
clearable
v-model="selectedOptions"
@change="handleChange">
</el-cascader>
</el-form>
data () {
return {
/*获取数据的url key需要自己到高德地图申请噢*/
url: 'https://restapi.amap.com/v3/config/district?keywords=&subdistrict=3&extensions=base&key=<用户的key>',
/*选项列表*/
cityOptions: [
],
/*选项列表格式*/
cityProps: {
value: 'name',
label: 'name',
children: 'districts'
}
}
methods: {
/* 获取省市区选项 */
getCity () {
axios.get(this.url).then(res => {
this.cityOptions = res.data.districts[0].districts
})
},
}
写了上述方法获取省市区数据，参数怎么配置可以在行政区查询数据里看文档的介绍，我是获取了中国下的所有省市区数据返回的结果如下
因为我只需要XX省-XX市-XX区（县）这样的层级关系，所以如果区（县）级的districts数组为空的话，级联选择器会多出来一个空的层级，这样明显是不对的于是需要些一个递归方法处理掉这个问题，把空的数组改为undefined级联选择器上就不会显示这个空的层级，方法如下。
methods: {
/* 获取省市区选项 */
getCity () {
axios.get(this.url).then(res => {
this.cityOptions = this.getTreeData(res.data.districts[0].districts)
})
},
/* 递归处理末尾项district为0的空项 */
getTreeData (data) {
// 循环遍历返回的数据
for (var i = 0; i < data.length; i++) {
if (data[i].districts.length < 1) {
// districts若为空数组，则将districts设为undefined
data[i].districts = undefined
} else {
// districts若不为空数组，则继续 递归调用 本方法
this.getTreeData(data[i].districts)
}
}
return data
},
}
created () {
this.getCity()
},
最后，在created()生命周期里调用获取失去选项的方法getCity()就好啦，效果如下
这个项目算是第一个由我主要开发负责的项目时间也比较赶，本着先救命再治病的思想所以写的比较简单，有需要的朋友可以参考一下
