效果展示：
【图1】
【图2】
组件描述：
观察上方图片展示，该组件的使用范围比较广。
（1）已知省份名称，可以查到 【图2】所示的。
（2）已知市区，然后得到省，可以查到【图1】所示的。
组件使用：
<v-ProCityCountyPicker
style="width: 90%; display: inline-block;"
:ProCityData="{provincesNew,newCity}"
v-on:ProCityCountyVal='ProCityCountyValFn'>
</v-ProCityCountyPicker>
/*说明：
ProCityData 里面的数据是要传给子组件的，没有的就传入''
ProCityCountyValFn 这个里面可以取到子组件，传给父的 省、市、区
*/
子组件：
<template>
<!-- 省市区的三级联动
传入的数据的格式：
{
province_list:{},
city_list:{},
county_list:{},
}
-->
<div id="pro_city_country">
<div @click="toSelect" class="select_part">
<span>{{provinces}}</span>
<span>{{city}}</span>
<span>{{county}}</span>
</div>
<van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
<van-area :area-list="areaList" :columns-num='colNum' :item-height='38' @confirm='confirmFn' @change="changeFn" @cancel="cancelFn" />
</van-popup>
</div>
</template>
<script>
import Area from '../../../static/common_js/new_file/area.js'
var that;
export default {
data() {
return {
show: false,
msg: '',
colNum: '3' ,//省市区显示列数，3-省市区，2-省市，1-省
city:'请选择',
county:'请选择',
areaList:{},
provinces:''
}
},
props: ['ProCityData'],
mounted() {
},
created() {
console.log('父传过来的provinces',this.ProCityData);
this.toHandleData(this.ProCityData.provincesNew,this.ProCityData.newCity);
},
methods: {
// 数据处理，得到areaList格式的数据
toHandleData(params_provinces,params_city){ // 传给子组件的省市区 格式是common_js / new_file / area.js格式
that = this;
let areaList = {}, // 需要的数据格式，都存在这个里面
need_province, //省
need_city = [], // 市
need_county = []; // 区县
areaList.province_list = {},
areaList.city_list = {},
areaList.county_list = {};
let provinceToParent, // 给父级的完整 省份
cityToParent; // 给父级完整的 市
for(let x in Area.province_list){
if(Area.province_list[x].substr(0,2) == params_provinces){
need_province = x + ''; // 得到省
}
}
console.log('need_province',need_province,params_provinces)
provinceToParent = that.provinces= Area.province_list[need_province];
if(params_city){
for(let idx in Area.city_list){
// params_city.substr(0,2) 方便处理 两个字，以上的对比
if(Area.city_list[idx].substr(0,2) == params_city.substr(0,2)){
need_city.push(idx);
}
}
that.city = cityToParent = Area.city_list[need_city[0]]
for(let county in Area.county_list){
if(county.substr(0,4) == need_city[0].substr(0,4)){
need_county.push(county); // 区的键
}
}
}else{
for(let city in Area.city_list){
if(city.substr(0,2) == need_province.substr(0,2)){
need_city.push(city); // 市的键
}
}
for(let county in Area.county_list){
if(county.substr(0,2) == need_province.substr(0,2)){
need_county.push(county); // 区的键
}
}
}
console.log('88888',need_city,params_city,need_province,need_city[0].substr(0,4))
console.log('3333333')
// 省
areaList.province_list[need_province] = Area.province_list[need_province]
// 市
need_city.forEach((item)=>{
areaList.city_list[item] = Area.city_list[item];
})
// 区、县county_list
need_county.forEach((item)=>{
areaList.county_list[item] = Area.county_list[item];
})
that.areaList = areaList;
console.log(areaList)
},
toSelect(){
this.show = true;
},
changeFn(event) {
console.log('改变',event);
},
confirmFn(event){
this.show = false;
let arr,SelectProvinceName,SelectCityName,SelectCountyName;
arr = event;
SelectProvinceName = arr[0].name; // 省
SelectCityName = arr[1].name; // 市
SelectCountyName = arr[2].name; // 区
this.city = SelectCityName;
this.county = SelectCountyName;
this.$emit('ProCityCountyVal',{SelectProvinceName,SelectCityName,SelectCountyName})
console.log('点击了确定按钮',SelectProvinceName,SelectCityName,SelectCountyName)
},
cancelFn(){
this.show = false;
console.log('点击了取消按钮');
}
}
}
</script>
<style scoped="scoped">
.select_part{
display: flex;
}
.select_part span{
width: 100%;
display: block;
flex: 4;
}
</style>
需要使用两个本地文件。
文件下载链接：2019-10-31更新。
----------完。
