级联选择
引入
全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。
// app.json 或 index.json
"usingComponents": {
"wr-area-picker": "@retailwe/ui-area-picker-new/index"
}
代码演示
基本用法
两级联动
<wr-cell title="省市两级联动" is-link bindclick="onTap" data-type="1"></wr-cell>
<wr-area-picker
show="{{visible1}}"
area-data="{{areaData}}"
title="选择地区"
value="{{value}}"
columns="{{columns}}"
bindconfirm="onConfirm"
data-type="1"
/>
三级联动
<wr-cell
title="省市区三级联动"
is-link
bindclick="onTap"
data-type="2"
></wr-cell>
<wr-area-picker
show="{{visible1}}"
area-data="{{areaData}}"
title="选择地区"
value="{{value}}"
columns="{{columns}}"
bindconfirm="onConfirm"
data-type="1"
/>
Page({
data: {
show: false,
columns: 3,
areaData: [
{
name: '北京市',
code: '110000',
children: [
{
name: '北京市',
code: '110100',
children: [
{
name: '东城区',
code: '110101',
children: null,
},
{
name: '西城区',
code: '110102',
children: null,
},
{
name: '朝阳区',
code: '110105',
children: null,
},
{
name: '丰台区',
code: '110106',
children: null,
},
{
name: '石景山区',
code: '110107',
children: null,
},
{
name: '海淀区',
code: '110108',
children: null,
},
{
name: '门头沟区',
code: '110109',
children: null,
},
{
name: '房山区',
code: '110111',
children: null,
},
{
name: '通州区',
code: '110112',
children: null,
},
{
name: '顺义区',
code: '110113',
children: null,
},
{
name: '昌平区',
code: '110114',
children: null,
},
{
name: '大兴区',
code: '110115',
children: null,
},
{
name: '怀柔区',
code: '110116',
children: null,
},
{
name: '平谷区',
code: '110117',
children: null,
},
{
name: '密云区',
code: '110118',
children: null,
},
{
name: '延庆区',
code: '110119',
children: null,
},
],
},
],
},
{
name: '天津市',
code: '120000',
children: [
{
name: '天津市',
code: '120100',
children: [
{
name: '和平区',
code: '120101',
children: null,
},
{
name: '河东区',
code: '120102',
children: null,
},
{
name: '河西区',
code: '120103',
children: null,
},
{
name: '南开区',
code: '120104',
children: null,
},
{
name: '河北区',
code: '120105',
children: null,
},
{
name: '红桥区',
code: '120106',
children: null,
},
{
name: '东丽区',
code: '120110',
children: null,
},
{
name: '西青区',
code: '120111',
children: null,
},
{
name: '津南区',
code: '120112',
children: null,
},
{
name: '北辰区',
code: '120113',
children: null,
},
{
name: '武清区',
code: '120114',
children: null,
},
{
name: '宝坻区',
code: '120115',
children: null,
},
{
name: '滨海新区',
code: '120116',
children: null,
},
{
name: '宁河区',
code: '120117',
children: null,
},
{
name: '静海区',
code: '120118',
children: null,
},
{
name: '蓟州区',
code: '120119',
children: null,
},
],
},
],
},
],
},
onTap(e: any) {
const { type } = e.currentTarget.dataset;
if (type == 1) {
this.setData({
visible1: true,
columns: 2,
});
}
if (type == 2) {
this.setData({
visible1: true,
columns: 3,
});
}
},
onConfirm(e: any) {
const { type } = e.currentTarget.dataset;
if (type == 1) {
this.setData({
visible1: false,
});
}
if (type == 2) {
this.setData({
visible1: false,
});
}
},
});
area-picker Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|
| columns | 省市区展示列数 | number | 3 | - |
| show | 弹窗显示 | boolean | false | - |
| area-data | 数据源 | array |
| title | 弹窗标题 | string |
| value | 当前选中的省市区 | string |
| columsName | 各级行政区的名称，用于未选时的占位内容以及提示 | array | ['省市/地区', '城市', '区'] |
| useLoadingSlot | 是否使用自定义loading插槽 | boolean | false |
area-data Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|
| name | 地域名 | string | - | - |
| code | code码 | string | - | - |
| children | 下级数据 | array | - | - |
area-picker Event
| 事件名 | 说明 | 参数 |
|---|
| pullchildren | 通知父组件/页面拉取数据 | parentCode: 可选参数，通知拉取该省份代码的下级行政区数据，为空则是通知拉取省级行政区 |
| change | 用户操作控件时触发 | value: 当前选取的该级行政区代码，areas：当前选择各级行政区组成的数组 |
| confirm | 用户操作控件时触发 | value: 当前选取的该级行政区代码，areas：当前选择各级行政区组成的数组 |
| close | 用户主动关闭弹框时触发 | - |