记录一次使用elementui级联选择器+高德行政区域查询api实现省市区三级地址选择
1. 首先准备一个级联选择框
<el-form-item label="地址" prop="address">
<el-cascader
filterable
placeholder="请选择"
ref="addPoint"
:props="cityProps"
:options="cityOptions"
clearable
v-model="selectedOptions"
></el-cascader>
</el-form-item>
2. data中准备数据
data() {
return {
/*获取数据的url key需要自己到高德地图申请*/
url: 'https://restapi.amap.com/v3/config/district?keywords=&subdistrict=3&extensions=base&key=<高德web服务key>',
/*选项列表*/
cityOptions: [],
/*选项列表格式*/
cityProps: {
value: 'name',
label: 'name',
children: 'districts',
},
selectedOptions: null, //选中的数据
}
},
3. 处理数据
所以如果区(县)级的districts数组为空的话,级联选择器会多出来一个空的层级,这样明显是不对的于是需要些一个递归方法处理掉这个问题,把空的数组改为undefined级联选择器上就不会显示这个空的层级,方法如下。
/* 获取省市区选项 */
getCity() {
this.request.get(this.url, null).then((res) => {
console.log(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
},
4. 创建页面时请求数据
created() {
this.getCity()
},
原文链接:https://www.jianshu.com/p/3958e30197b0
高德行政区域查询:https://lbs.amap.com/api/webservice/guide/api/district