介紹

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

引入import Vue from 'vue';

import { Area } from 'vant';

Vue.use(Area);

代碼演示

基礎用法

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

選中省市區

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

配置顯示列

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

配置列占位提示文字

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

:area-list="areaList"

:columns-placeholder="['請選擇', '請選擇', '請選擇']"

title="標題"

/>

API

Props參數說明類型默認值value當前選中的省市區codestring-

title頂部欄標題string-

confirm-button-text確認按鈕文字string確認

cancel-button-text取消按鈕文字string取消

area-list省市區數據，格式見下方object-

columns-placeholder?v2.2.5列占位提示文字string[][]

loading是否顯示加載狀態booleanfalse

item-height選項高度number | string44

columns-num顯示列數，3-省市區，2-省市，1-省number | string3

visible-item-count可見的選項個數number | string5

swipe-duration?v2.2.13快速滑動時慣性滾動的時長，單位msnumber | string1000

is-oversea-code?v2.1.4根據code校驗海外地址，海外地址會劃分至單獨的分類() => boolean-

Events事件說明回調參數confirm點擊右上方完成按鈕一個數組參數，具體格式看下方數據格式章節

cancel點擊取消按鈕時-

change選項改變時觸發Picker 實例，所有列選中值，當前列對應的索引

方法

通過 ref 可以獲取到 Area 實例并調用實例方法，詳見?組件實例方法方法名說明參數返回值reset根據 code 重置所有選項，若不傳 code，則重置到第一項code?: string-

省市區列表數據格式

整體是一個 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: '河北區',

// ....

}

}

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

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

code?代表被選中的地區編碼，?name?代表被選中的地區名稱[

{

code: '110000',

name: '北京市'

},

{

code: '110100',

name: '北京市'

},

{

code: '110101',

name: '東城區'

}

];

常見問題

在桌面端無法操作組件？

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的vant 索引城市不对_Vant Area 省市区选择的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。