Vant Area 省市區(qū)選擇

介紹

省市區(qū)三級聯動選擇，通常與 彈出層 組件配合使用

引入

import Vue from 'vue';
import { Area } from 'vant';

Vue.use(Area);

代碼演示

基礎用法

要初始化一個Area組件，你需要傳入一個area-list屬性，數據格式具體可看下面數據格式章節(jié)

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

選中省市區(qū)

如果想選中某個省市區(qū)，需要傳入一個value屬性，綁定對應的省市區(qū)code

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

配置顯示列

可以通過columns-num屬性配置省市區(qū)顯示的列數，默認情況下會顯示省市區(qū)，當你設置為2，則只會顯示省市選擇

<van-area :area-list="areaList" :columns-num="2" title="標題" />

配置列占位提示文字

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

<van-area
  :area-list="areaList"
  :columns-placeholder="['請選擇', '請選擇', '請選擇']"
  title="標題"
/>

API

Props

Events

方法

通過 ref 可以獲取到 Area 實例并調用實例方法，詳見 組件實例方法

省市區(qū)列表數據格式

整體是一個 object，包含 province_list, city_list, county_list 三個 key。

每項以省市區(qū)編碼作為 key，省市區(qū)名字作為 value。編碼為 6 位數字，前兩位代表省份，中間兩位代表城市，后兩位代表區(qū)縣，以 0 補足 6 位。如北京編碼為 11，以零補足 6 位，為 110000。

AreaList具體格式如下：

{
  province_list: {
    110000: '北京市',
    120000: '天津市'
  },
  city_list: {
    110100: '北京市',
    110200: '縣',
    120100: '天津市',
    120200: '縣'
  },
  county_list: {
    110101: '東城區(qū)',
    110102: '西城區(qū)',
    110105: '朝陽區(qū)',
    110106: '豐臺區(qū)'
    120101: '和平區(qū)',
    120102: '河東區(qū)',
    120103: '河西區(qū)',
    120104: '南開區(qū)',
    120105: '河北區(qū)',
    // ....
  }
}

完整數據見 Area.json

點擊完成時返回的數據格式

返回的數據整體為一個數組，數組內包含 columnsNum 個數據， 每個數據對應一列選項中被選中的數據。

code 代表被選中的地區(qū)編碼， name 代表被選中的地區(qū)名稱

[
  {
    code: '110000',
    name: '北京市'
  },
  {
    code: '110100',
    name: '北京市'
  },
  {
    code: '110101',
    name: '東城區(qū)'
  }
];

常見問題

在桌面端無法操作組件？

參見在桌面端使用。