Area 省市区选择

引入

在或index.json中引入组件，详细介绍见快速上手

基础用法

要初始化一个Area组件，你需要传入一个area-list属性，数据格式具体可看下面数据格式章节

  1. <van-area area-list="{{ areaList }}" />

选中省市区

如果想选中某个省市区，需要传入一个value属性，绑定对应的省市区code

可以通过columns-num属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为2，则只会显示省市选择

  1. <van-area area-list="{{ areaList }}" columns-num="{{ 2 }}" title="标题" />

配置列占位提示文字

可以通过columns-placeholder属性配置每一列的占位提示文字

使用云开发获取省市区数据

在小程序中使用云能力之前需要先调用wx.could.init方法完成云能力的初始化。



Props


方法
通过 selectComponent 可以获取到 Area 实例并调用实例方法


省市区列表数据格式
整体是一个 Object，包含 province_list, city_list, county_list 三个 key。


每项以省市区编码作为 key，省市区名字作为 value。编码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。如北京编码为 ，以零补足 6 位，为 110000。


AreaList具体格式如下：


点击完成时返回的数据格式
返回的数据整体为一个 Object，包含 values, indexs 两个 key


values 整体为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中的数据。


code 代表被选中的地区编码， name 代表被选中的地区名称


[
  {
    code: '110000',
    name: '北京市'
  },
  {
    code: '110100',
    name: '北京市'
  },
  {
    code: '110101',
    name: '东城区'
  }
];



indexs 为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中项的序号。