<template>
|
<div style="display: flex">
|
<el-select
|
v-model="caddress.sheng"
|
style="flex: 1"
|
placeholder="请选择省份"
|
size="small"
|
@change="getCityData"
|
>
|
<el-option
|
v-for="item in addressArray"
|
:key="item.areacode"
|
:label="item.areaname"
|
:value="item.areaname"
|
>
|
</el-option>
|
</el-select>
|
<el-select
|
v-model="caddress.shi"
|
style="flex: 1; margin-left: 10px"
|
placeholder="请选择市区"
|
size="small"
|
@change="getAreaData"
|
>
|
<el-option
|
v-for="item in cityArray"
|
:key="item.areacode"
|
:label="item.areaname"
|
:value="item.areaname"
|
>
|
</el-option>
|
</el-select>
|
<el-select
|
v-model="caddress.qu"
|
style="flex: 1; margin-left: 10px"
|
placeholder="请选择县"
|
size="small"
|
@change="onAreaChanged"
|
>
|
<el-option
|
v-for="item in areaArray"
|
:key="item.areacode"
|
:label="item.areaname"
|
:value="item.areaname"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</template>
|
|
<script>
|
// 使用说明：v-model时，必须传带有带有省，市，区拼音的字段
|
import request from '@/utils/request'
|
export default {
|
name: "li_area_select",
|
//通过 model 选项配置子组件接收的 prop 名以及派发的事件名
|
model: {
|
prop: "caddress",
|
event: "change",
|
},
|
props: {
|
caddress: {
|
type: Object,
|
},
|
},
|
data() {
|
return {
|
areaJson: "/project/dict/treeselect", // 上传的图片服务器地址
|
//areaJson: './../address.json',
|
addressArray: [], //所有数据
|
cityArray: [],
|
areaArray: [],
|
};
|
},
|
created() {
|
this.getAddressData();
|
},
|
methods: {
|
getAddressData() {
|
var that = this;
|
request({
|
url: that.areaJson,
|
method: "get",
|
}).then(function (response) {
|
if (response.code === 200) {
|
//获取地址
|
|
that.addressArray = response.data;
|
//默认值赋值获取城市数组
|
if (that.caddress.sheng) {
|
for (let ad of that.addressArray) {
|
if (ad.areaname === that.caddress.sheng) {
|
that.cityArray = ad.subarea;
|
//---
|
//默认赋值获取区域数组
|
if (that.caddress.shi) {
|
for (let area of that.cityArray) {
|
if (area.areaname === that.caddress.shi) {
|
that.areaArray = area.subarea;
|
break;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
});
|
},
|
//选择省份
|
getCityData(val) {
|
//清空市，和区
|
this.caddress.shi = "";
|
this.caddress.qu = "";
|
this.$emit("change", this.caddress); //发送改变
|
for (let ad of this.addressArray) {
|
if (ad.areaname === val) {
|
this.cityArray = ad.subarea;
|
return;
|
}
|
}
|
},
|
getAreaData(val) {
|
//清空区
|
this.caddress.qu = "";
|
this.$emit("change", this.caddress); //发送改变
|
for (let area of this.cityArray) {
|
if (area.areaname === val) {
|
this.areaArray = area.subarea;
|
return;
|
}
|
}
|
},
|
//地区数据变动后
|
onAreaChanged(val) {
|
this.$emit("change", this.caddress); //发送改变
|
this.$forceUpdate();
|
},
|
|
getSheng(){
|
let list= this.addressArray.filter(r=>r.areaname == this.caddress.sheng);
|
if(list.length>0){
|
return list[0].areacode;
|
}
|
else{
|
return '';
|
}
|
},
|
getShi(){
|
let list= this.cityArray.filter(r=>r.areaname == this.caddress.shi);
|
if(list.length>0){
|
return list[0].areacode;
|
}
|
else{
|
return '';
|
}
|
},
|
getQu(){
|
let list= this.areaArray.filter(r=>r.areaname == this.caddress.qu);
|
if(list.length>0){
|
return list[0].areacode;
|
}
|
else{
|
return '';
|
}
|
},
|
clean(){
|
this.caddress.sheng="";
|
this.caddress.shi="";
|
this.caddress.qu="";
|
}
|
},
|
};
|
</script>
|
|
<style scoped>
|
</style>
|
