uniapp省市选择

<picker @change="selCity" @columnchange="selMonitor" :value="addressIndex" :range="address" mode="multiSelector">
    <text>addressNode.province + addressNode.city</text>
</picker>

address.json地址：
https://github.com/KillBOSS-KillMe/referenceDocument/blob/master/json/address.json

// 导入全国省市区集合
import address from '@/static/json/address.json';
export default {
data() {
return {
address: [],
provinceList: [],
cityAllList: [],
addressIndex: [0, 0],
addressNode: {
province: "请选择城市",
city: ""
}
};
},
onLoad() {
const that = this
// 将省市区的数据转换为picker可用的多维数组
that.getAddressData()
},
methods: {
// 获取地址信息
selCity(e) {
const that = this;
let val = e.target.value
that.addressNode = {
province: that.address[0][val[0]],
city: that.address[1][val[1]]
}
},
// 监听省市区滚动
selMonitor(e) {
const that = this
let column = e.detail.column
if (column == 0) {
let index = e.detail.value
that.address[1] = that.cityAllList[index]
//强制刷新
that.$forceUpdate()
}
},
// 将省市区的数据转换为picker可用的多维数组
getAddressData() {
const that = this;
// 所有城市列表,二维数组
let cityAllList = [];
// 省列表
let provinceList = [];
// address为省市区的json数据
for (let key in address) {
let newDataList = [];
if (address[key].children) {
for (let key2 in address[key].children) {
newDataList.push(address[key].children[key2].name);
}
}
provinceList.push(address[key].name);
cityAllList.push(newDataList);
}
that.provinceList = provinceList;
that.cityAllList = cityAllList;
that.address = [provinceList, cityAllList[0]];
}
}
};