<van-popup v-model="pickerAreaShow" position="bottom">
<van-area
title="省市区"
:area-list="areaList"
@cancel="onCancel"
@confirm='onAreaConfirm'
/>
</van-popup>
省市区列表数据格式
整体是一个 object,包含 province_list
, city_list
, county_list
三个 key。
每项以省市区编码作为 key,省市区名字作为 value。编码为 6 位数字,前两位代表省份,中间两位代表城市,后两位代表区县,以 0 补足 6 位。如北京编码为 11
,以零补足 6 位,为 110000
。
AreaList
具体格式如下:
{
province_list: {
110000: '北京市',
120000: '天津市'
},
city_list: {
110100: '北京市',
110200: '县',
120100: '天津市',
120200: '县'
},
county_list: {
110101: '东城区',
110102: '西城区',
110105: '朝阳区',
110106: '丰台区'
120101: '和平区',
120102: '河东区',
120103: '河西区',
120104: '南开区',
120105: '河北区',
// ....
}
}
完整数据见 Area.json
因为省市区几乎不会变了,就没走接口,直接将vant官方的json数据放到我本地,用js方式调用
// 调用
import {area} from 'common/area';
// json赋值
mounted(){
this.areaList=area
},
// 选中回调函数取值
onAreaConfirm(e){
console.log(e) // 通过e得到是数组格式
this.areaVal=e[0].name+"-"+e[1].name; // 得到省市两级数据
},