Area province and city selection


Three-level linkage selection of provinces and cities, usually used in conjunction with the popup layer component.

Code Demo

Basic usage

When initializing the province and city components, you need to pass in the province and city data through the area-list attribute.

<z-area title="title" :area-list="areaList" />

areaList format

areaList is an object structure, including three keys: province_list, city_list, and county_list.

Each item uses the area code as the key and the province and city name as the value. The area code is a 6-digit number. The first two digits represent the province, the middle two digits represent the city, and the last two digits represent the district and county. The six digits are supplemented with 0s. For example, the area code of Beijing is 11, padding 6 digits with 0, it is 110000.

Sample data is as follows:

const areaList = {
   province_list: {
     110000: 'Beijing City',
     120000: 'Tianjin City',
   city_list: {
     110100: 'Beijing',
     120100: 'Tianjin City',
   county_list: {
     110101: 'Dongcheng District',
     110102: 'Xicheng District',
     // ....

China province and city data

The sample project of zebra-ui provides Chinese province and city data, which can be copied and quoted directly.

import { areaList } from '../../common/js/area'

Control selected items

Bind the currently selected region code through v-model.

<z-area v-model="valueSelect" title="title" :area-list="areaList" />
import { ref } from 'vue';
import { areaList } from '../../common/js/area'
const valueSelect = ref('330302')

Configure display columns

You can configure the number of columns displayed in provinces and cities through the columns-num attribute. By default, provinces and cities will be displayed. When you set it to 2, only provinces and cities will be displayed.

<z-area title="title" :area-list="areaList" :columns-num="2" />

Configure column placeholder prompt text

The placeholder text for each column can be configured through the columns-placeholder attribute.

   :columns-placeholder="['Please select', 'Please select', 'Please select']"



ParametersDescriptionTypeDefault value
v-modelThe area code corresponding to the currently selected itemstring-
titleTop column titlestring-
confirm-button-textConfirm button textstringConfirm
cancel-button-textCancel button textstringCancel
area-listProvince and city dataobject-
columns-placeholderColumn placeholder prompt textstring[]
loadingwhether to display loading statusbooleanfalse
readonlyWhether it is in read-only state. Options cannot be switched in read-only statebooleanfalse
option-heightOption height, supports rpx unit, default pxnumber | string44
columns-numDisplay the number of columns, 3-province and city, 2-province and city, 1-provincenumber | string3
visible-option-numNumber of visible optionsnumber | string6
swipe-durationThe duration of inertial scrolling during fast swiping, unit msnumber | string1000


Event nameDescriptionCallback parameters
confirmTriggered when the completion button is clicked{ selectedValues, selectedOptions, selectedIndexes }
cancelTriggered when the cancel button is clicked{ selectedValues, selectedOptions, selectedIndexes }
changeTriggered when options change{ selectedValues, selectedOptions, selectedIndexes, columnIndex }


toolbarCustomize the entire top bar content-
titleCustom title content-
confirmCustomize the confirmation button content-
cancelCustomize cancel button content-
columns-topCustomize the content above the options-
columns-bottomCustomize the content below the options-


Area instances can be obtained through ref and instance methods can be called.

Method nameDescriptionParametersReturn value
confirmStop inertial scrolling and trigger the confirm event--
getSelectedOptionsGet the currently selected options-PickerOption