记录一次使用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

posted @ 2022-03-13 17:01  gimmick  阅读(532)  评论(0编辑  收藏  举报