使用vue elementUI设置省市县三级联动的下拉列表框

• 选择户籍
• • 组件的数据配置：
  • • 进行本地的获取行政区划的接口api的请求
• 在高德开放平台申请的个人key
• 实现效果

选择户籍

<el-select v-model="form.region1" clearable size="small" placeholder="请选择省" class="filter-item" style="width: 90px" @change="provinceChange($event)">
                      <el-option v-for="item in provinceList" :key="item.name" :label="item.name" :value="item.name"/>
                    </el-select>

                    <el-select v-model="form.region2" clearable size="small" placeholder="请选择城市" class="filter-item" style="width: 100px"  @change="cityChange($event)">
                      <el-option v-for="item in cityList" :key="item.name" :label="item.name" :value="item.name" />
                    </el-select>

                    <el-select v-model="form.region3" clearable size="small" placeholder="请选择区县" class="filter-item" style="width: 100px" >
                      <el-option v-for="item in countyList" :key="item.name" :label="item.name" :value="item.name" />
                    </el-select>

组件的数据配置：

CITY: [],
      XIAN: [],
      provinceList: [],
      cityList: [],
      countyList: [],;

进行本地的获取行政区划的接口api的请求

getCityList() {
      crudAnchorRecruitment.getCityList().then(rs => {
        this.provinceList = rs.districts[0].districts /* 省*/
        /* 进行遍历赋值*/
        /* 市区和县区*/
        const newProvince = this.provinceList
        for (let i = 0; i < newProvince.length; i++) { /* 省级*/
          for (let j = 0; j < newProvince[i].districts.length; j++) { /* 市级*/
            const city = newProvince[i].districts[j].name
            this.CITY.push({ id: j + 1, name: city, code: i + 1 })
            for (let k = 0; k < newProvince[i].districts[j].districts.length; k++) { /* 县级*/
              const xian = newProvince[i].districts[j].districts[k].name
              this.XIAN.push({ id: k + 1, name: xian, code: j + 1, cityCountyName: city })
            }
          }
        }
        for (let m = 0; m < newProvince.length; m++) {
          newProvince[m] = { ...newProvince[m], ...{ code: m + 1 }}
        }
        this.provinceList = newProvince
      })
    },
    provinceChange(that) {
      // 根据选中省，匹配市
      let cityCode = 0
      this.provinceList.forEach((item, index) => {
        if (item.name === that) {
          cityCode = item.code
        }
      })
      // console.log(cityCode)
      if (cityCode) {
        this.cityList = []
        this.CITY.forEach((item, index) => {
          if (item.code === cityCode) {
            this.cityList.push(item)
          }
        }) /* 市匹配成功*/
      }
    },
    cityChange(that) {
      let countyCode = 0
      let cityname = ''
      this.cityList.forEach((item, index) => {
        if (item.name === that) {
          countyCode = item.id
          cityname = item.name
        }
      })
      if (countyCode) {
        this.countyList = []
        this.XIAN.forEach((item, index) => {
          if (item.code === countyCode && item.cityCountyName === cityname) {
            this.countyList.push(item)
          }
        })
      }
    }

getCityList 后端调用高德地图
String url = autoNaviUrl + "&key=" + key;
        if (StringUtils.isNotBlank(keyWords)) {
            url += "&keyWords=" + keyWords;
        }
        if (StringUtils.isNotBlank(subdistrict)) {
            url += "&subdistrict=" + subdistrict;
        }
        HashMap<String, String> header = new HashMap<>();
        JSONObject data = restTemplateUtil.getData(url, header);

// 前端调用也可以
this.$http({
              method:"get",
              url:"https://restapi.amap.com/v3/config/district?parameters", // apii请求地址
              params:{  // 携带的参数
                  key:"", // 在高德开放平台申请的个人key密钥
                  keyWords:"中国",
                  subdistrict:3    // 要获取的行政区划的级别：省、市、县三级
              }
}).then((res)=>{
       this.form.provinceList = res.data.districts[0].districts  /* 省*/
         /* 进行遍历赋值*/
         /* 市区和县区*/
       let newProvince = this.form.provinceList
       for(let i = 0; i < newProvince.length; i++){              /* 省级*/
           for(let j = 0; j < newProvince[i].districts.length; j++){       /* 市级*/
               let city = newProvince[i].districts[j].name
               this.CITY.push({id:j+1,name:city,code:i+1})
               for(let k = 0;k<newProvince[i].districts[j].districts.length; k++){/* 县级*/
                   let xian = newProvince[i].districts[j].districts[k].name
                    this.XIAN.push({id:k+1,name:xian,code:j+1,cityCountyName:city})
               }
           }
       }
       for(let m = 0; m < newProvince.length;m++){
           newProvince[m] = {...newProvince[m],...{code:m+1}}
       }
       this.form.provinceList = newProvince
})

在高德开放平台申请的个人key

https://lbs.amap.com/?ref=https%3A%2F%2Fgeohub.amap.com%2Fmapstyle%2Ftopicmap

实现效果