<template>
<view>
<u-button @click="tesx">11</u-button>
{{aa}}
<city v-model="aa"></city>
</view>
</template>
<script>
import city from './city.vue'
export default {
components:{city},
data() {
return {
aa:''
}
},
methods: {
tesx(){
this.aa='河北省-石家庄市-市辖区'
}
}
}
</script>
<style>
</style>
<template>
<view>
<view @tap="toOpen">
<text :style="{ color: local.length ? '#333' : '#c0c4cc' }">{{
local === "" ? "选择省/市/区" : local
}}</text>
</view>
<u-picker
@cancel="showLocal = false"
@close="showLocal = false"
:show="showLocal"
:columns="addressColumns"
@confirm="localConfirm"
title="请选择所在地"
keyName="name"
itemHeight="80"
closeOnClickOverlay
ref="uPicker"
@change="changeHandler"
:defaultIndex="defaultAddress"
immediateChange
></u-picker>
</view>
</template>
<script>
import areas from "./china.json"; //引入原始数据
export default {
props:{
value:{}
},
data() {
return {
local: "", //区域
localCode: "", //这个变量看个人需求使用
showLocal: false, //是否展示弹出层
addressColumns: [], //数据数组
defaultAddress: [], //默认选中 (回填时或者初次显示默认选中)
addressData: areas, //原始数据 (引入的json文件)
};
},
watch:{
value(val){
if(val!==this.local){
this.local=val
}
}
},
methods: {
toOpen(){
if( this.local){
this.backfill(this.local)
}
this.showLocal = true
},
changeHandler(e) {
//分别表示选中的列 , 该列的第几个,选中的3列的第几个的数组,组件本身
const { columnIndex, index, indexs, picker = this.$refs.uPicker } = e;
//如果改变的是第一列
if (columnIndex === 0) {
const children1 = this.addressData[index].areas.map((e) => {
return { name: e.name, code: e.code };
});
picker.setColumnValues(1, children1);
//更换 第二列数据
const children2 = this.addressData[index].areas[indexs[1]].areas.map(
(e) => {
return { name: e.name, code: e.code };
}
);
picker.setColumnValues(2, children2);
//更换 第三列数据
}
if (columnIndex === 1) {
//如果改变的是第二列
const children3 = this.addressData[indexs[0]].areas[
indexs[1]
].areas.map((e) => {
return { name: e.name, code: e.code };
});
picker.setColumnValues(2, children3);
//更换 第三列数据
}
},
localConfirm(e) {
//显而易见 不多赘述
this.local = `${e.value[0].name}-${e.value[1].name}-${e.value[2].name}`;
this.localCode = `${e.value[0].code}-${e.value[1].code}-${e.value[2].code}`;
this.$emit('input',this.local)
this.showLocal = false;
},
backfill(temp) {
temp = temp.split("-");
let index,
index1,
index2 = 0;
let arr,
arr1,
arr2 = [];
console.log(this.addressData);
//匹配省市区对应每列的第几个
this.addressData.forEach((item, i) => {
if (item.name == temp[0]) {
index = i;
item.areas.forEach((val, ind) => {
if (val.name == temp[1]) {
index1 = ind;
val.areas.forEach((e, n) => {
if (e.name == temp[2]) {
index2 = n;
}
});
}
});
}
});
arr = this.addressData.map((e) => {
return { name: e.name, code: e.code };
});
arr1 = this.addressData[index].areas.map((e) => {
return { name: e.name, code: e.code };
});
arr2 = this.addressData[index].areas[index1].areas.map((e) => {
return { name: e.name, code: e.code };
});
//反推出3列的数组数据
this.addressColumns = [arr, arr1, arr2];
// 赋值给 默认初始选中
this.defaultAddress = [index, index1, index2];
},
},
mounted() {
//省的数组
const provinceData = areas.map((e) => {
return { name: e.name, code: e.code }; //这里可以直接return e.name 这里我是要用到code所以才用对象包起来的 下面的市 区 也一样
});
//市的数组
const cityData = areas.map((e) => {
const arr = [];
arr.push(
e.areas.map((c) => {
return { name: c.name, code: c.code };
})
);
return arr;
});
//区的数组
const areaData = areas.map((e) => {
const arr = [];
arr.push(
e.areas.map((c) =>
c.areas.map((d) => {
return { name: d.name, code: d.code };
})
)
);
return arr;
});
const arr = [provinceData, cityData[0][0], areaData[0][0][0]];
this.addressColumns = arr; //将得到的3个数组 的第一个市的所有数据赋值 作为初始数据
},
};
</script>
<style></style>