vant省市区选择绑定数据回调,及调用本地json数据

1,019 阅读1分钟
<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;  // 得到省市两级数据
},