那么,只要将地区整合进去就可以了。废话不多多说,直接开搞:
1、首先是el-cascader
<el-cascader placeholder="请点击选择地址" :options="options" v-model="selectedOptions" @change="handleChange" clearable ></el-cascader>2、参数定义
data() { return { options: [], selectedOptions: [], cityArr: [], //城市列表 areaArr: [], //区县列表 province: "", //省 city: "", //市 area: "", // 区县, provinceCityArea: "", //选择器选择的省市区 }; },3、地区初始化,districts.json文件就是全国区域编码
initDistPicker() { let self = this; this.$http.get("/static/js/districts.json").then(function(respones) { let distData = respones.data; let options = []; // 省 for (var provinceKy in distData["100000"]) { let optProvinceItem = { value: provinceKy, label: distData["100000"][provinceKy] }; if (distData[provinceKy]) { // 市 for (var cityKy in distData[provinceKy]) { optProvinceItem.children = optProvinceItem.children ? optProvinceItem.children : []; let optCityItem = { value: cityKy, label: distData[provinceKy][cityKy] }; if (distData[cityKy]) { // 区 for (var areaKy in distData[cityKy]) { optCityItem.children = optCityItem.children ? optCityItem.children : []; let optAreaItem = { value: areaKy, label: distData[cityKy][areaKy] }; optCityItem.children.push(optAreaItem); } } optProvinceItem.children.push(optCityItem); } } options.push(optProvinceItem); } self.distData = distData; self.options = options; }); }4、handleChange方法
handleChange(value) { let self = this; console.log("value=>", value); //获取省名 self.options.map((item, index) => { if (item.value == value[0]) { self.cityArr = item.children; //存储城市列表 self.province = item.label; } }); //获取市名 self.cityArr.map((item, index) => { if (item.value == value[1]) { self.areaArr = item.children; //存储区县列表 self.city = item.label; } }); //获取区县名 self.areaArr.map((item, index) => { if (item.value == value[2]) { self.area = item.label; } }); self.provinceCityArea = self.province + self.city + self.area; console.log("self.provinceCityArea", self.provinceCityArea); },至此,就搞定了,点击下载 districts.json 提取码: fcy8