使用vue elementUI设置省市县三级联动的下拉列表框
选择户籍
<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