重要生命:此代码存在部分BUG,推荐使用uniapp组件库pickerAddress组件进行省市区选择
此文章只包含省市的选择,不包含区的选择,如果需要区的选择,可以在此基础上进行扩展
<picker @change="selCity" @columnchange="selMonitor" :value="addressIndex" :range="address" mode="multiSelector">
<view class="setCon">
<input type="text" :value="addressNode.province + addressNode.city" disabled="" />
<icon class="iconfont iconkefu"></icon>
</view>
</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]
}
},
// 将省市区的数据转换为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]];
}
}
};