• Area 省市区选择
    • 介绍
    • 引入
  • 代码演示
    • 基础用法
    • 选中省市区
    • 配置显示列
  • API
    • Props
    • Events
    • 方法
    • 省市区列表数据格式
    • 点击完成时返回的数据格式

    Area 省市区选择

    介绍

    省市取选择组件通常与 弹出层 组件配合使用

    引入

    1. import { Area } from 'vant';
    3. Vue.use(Area);

    代码演示

    基础用法

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

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

    选中省市区

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

    1. <van-area :area-list="areaList" value="110101" />

    配置显示列

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

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

    API

    Props

    参数说明类型默认值版本
    value当前选中的省市区codeString--
    title顶部栏标题String--
    area-list省市区数据，格式见下方Object--
    columns-num显示列数，3-省市区，2-省市，1-省String | Number3-
    loading是否显示加载状态Booleanfalse-
    item-height选项高度Number44-
    visible-item-count可见的选项个数Number5-
    confirm-button-text确认按钮文字String确认1.5.3
    cancel-button-text取消按钮文字String取消1.5.3

    Events

    事件说明回调参数
    confirm点击右上方完成按钮一个数组参数，具体格式看下方数据格式章节
    cancel点击取消按钮时-
    change选项改变时触发Picker 实例，所有列选中值，当前列对应的索引

    方法

    通过 ref 可以获取到 area 实例并调用实例方法

    方法名参数返回值介绍
    resetcode: string-根据 code 重置所有选项，若不传 code，则重置到第一项

    省市区列表数据格式

    整体是一个 Object，包含 province_list, city_list, county_list 三个 key。

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

    AreaList具体格式如下：

    1. {
    2.   province_list: {
    3.     110000: '北京市',
    4.     120000: '天津市'
    5.   },
    6.   city_list: {
    7.     110100: '北京市',
    8.     110200: '县',
    9.     120100: '天津市',
    10.     120200: '县'
    11.   },
    12.   county_list: {
    13.     110101: '东城区',
    14.     110102: '西城区',
    15.     110105: '朝阳区',
    16.     110106: '丰台区'
    17.     120101: '和平区',
    18.     120102: '河东区',
    19.     120103: '河西区',
    20.     120104: '南开区',
    21.     120105: '河北区',
    22.     // ....
    23.   }
    24. }

    完整数据见 Area.json

    点击完成时返回的数据格式

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

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

    1. [
    2.   {
    3.     code: '110000',
    4.     name: '北京市'
    5.   },
    6.   {
    7.     code: '110100',
    8.     name: '北京市'
    9.   },
    10.   {
    11.     code: '110101',
    12.     name: '东城区'
    13.   }
    14. ];

    Area 省市区选择 - 图1