废话不说，直接上代码：
<div class="edit_box_item"><label>所在地区</label><el-selectv-model="province_code"@change="changeProvince(province_code)"placeholder="省"><el-optionv-for="item in provinceList":key="item.value":label="item.name":value="item.value"></el-option></el-select><el-selectv-model="city_code"@change="changeCity(city_code)"placeholder="市"><el-optionv-for="item in cityOptions":key="item.value":label="item.name":value="item.value"></el-option></el-select><el-selectv-model="country_code"@change="changeOrigin"placeholder="区/县"><el-optionv-for="item in originOptions":key="item.value":label="item.name":value="item.value"></el-option></el-select></div>
js
先引入js三级联动
import { mapdata } from "../../assets/js/map";data(){return {provinceList: [], // 省列表cityOptions: [], // 市列表originOptions: [], // 区列表}
},
mounted(){
this._getJsonData();
},
methods: {
// 选择省changeProvince(val) {this.cityOptions = [];this.getAllList.forEach(data => {if (val == data.parent) {this.cityOptions.push(data);}});this.city_code = this.cityOptions[0].value;this.changeCity(this.city_code);},// 选择市changeCity(val) {this.originOptions = [];this.getAllList.forEach(data => {if (val == data.parent) {this.originOptions.push(data);}});this.country_code = this.originOptions[0].value;this.changeOrigin(this.country_code);},// 选择区changeOrigin(val) {},_getJsonData() {this.getAllList = mapdata;this.getAllList.forEach(data => {if (!data.parent) {this.provinceList.push(data);}});if (this.$route.query.editData) {this.editData = this.$route.query.editData;this.linkman = this.editData.linkman;this.contact = this.editData.contact;this.address_detail = this.editData.address_detail;this.default = this.editData.default;if (this.default == 1) {this.switchvalue = true;} else {this.switchvalue = false;}this.province_code = String(this.editData.province_code);this.city_code = String(this.editData.city_code);this.getAllList.forEach(data => {if (this.province_code == data.parent) {this.cityOptions.push(data);}if (this.city_code == data.parent) {this.originOptions.push(data);}});this.country_code = String(this.editData.country_code);this.add_lat = this.editData.add_lat;this.add_lon = this.editData.add_lon;this.tolnglat = [this.add_lon, this.add_lat];}},
}
export const mapdata = [{
"name": "北京市",
"value": "110000"
},
{
"name": "天津市",
"value": "120000"
}
]