废话不说,直接上代码:
<div class="edit_box_item">
<label>所在地区</label>
<el-select
v-model="province_code"
@change="changeProvince(province_code)"
placeholder="省">
<el-option
v-for="item in provinceList"
:key="item.value"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
<el-select
v-model="city_code"
@change="changeCity(city_code)"
placeholder="市">
<el-option
v-for="item in cityOptions"
:key="item.value"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
<el-select
v-model="country_code"
@change="changeOrigin"
placeholder="区/县">
<el-option
v-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"
}
]