@aliretail/react-materials-components
Version:
144 lines (128 loc) • 5.62 kB
Markdown
---
title: AreaSelector-API
order: 1
category: UI
description: 省市区选择器
screenshot: https://gw.alicdn.com/imgextra/i2/O1CN01yW3hCD1M8CnqeKFlq_!!6000000001389-2-tps-90-90.png
---
# 区域选择器
用来处理选中数据三级省市区结构化处理，以及处理后端返回数据的回显
### AreaSelector
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| ------ | ---- | ---- | ---- | ------ | ---- |
| appCode | 应用code 或相对路径(dataSource存在时无效) | - | string | | |
| apiCode | API code(dataSource存在时无效) | - | string | | |
| value | (受控)当前值,单选时:三级省市区嵌套code和那name;多选时默认选中code数组,点击选中的或省或市或区code,类似多选时onChange第一个参数 | y | Array | - | |
| multiple | 是否多选 | - | boolean | true | |
| onChange | 选中值改变时触发的回调函数 单选Function(value:Array,codeData:Array,renderData:Array,data: Object/Array, extra: Object ) => void value: [] 单选时选中的数据的路径，省市区三级嵌套code，name;多选时返回选中的code数组。codeData:单选时空数组[]，多选时选中code,及父级code嵌套至省级结束。renderData:单选时空数组,多选时item(包含name,code)，及父级item嵌套至省级结束。data: {Object/Array} 选中的数据，包括 value 和 label，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点; extra.selectedPath: {Array} 选中的数据的路径;其他属性同fusion | - | Function | - | |
| isPreview | 是否为预览态 | - | Boolean | false | |
| placeholder | 选择框占位符 | - | String | '' | |
| disabled | 是否禁用 | - | Boolean | false | |
| readOnly | 是否只读，只读模式下可以展开弹层但不能选 | - | Boolean | false | |
| maxTagCount | 最多显示多少个 tag | - | Number | - | |
| dataSource | 数据源，结构可参考下方说明 | - | Array | - | |
| hasClear | 是否有清除按钮 | - | Boolean | false | |
## dataSource数据结构
```
const dataSource=[
{
"children": [],
"label": "澳门特别行政区",
"divLevel": 1,
"value": "820000"
},
{
"label": "浙江省",
"divLevel": 1,
"value": "330000",
"children": [
{
"parentCode": "330000",
"label": "杭州市",
"divLevel": 2,
"value": "330100",
"children": [
{
"children": [],
"parentCode": "330100",
"label": "余杭区",
"divLevel": 3,
"value": "330110"
},
...
],
},
...
],
},
...
]
```
## 逐级区域选择器
### AreaSelector.Gradually
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| ------ | ---- | ---- | ---- | ------ | ---- |
| appCode | 应用code 或相对路径 | Y | string | ' ' | |
| apiCode | API code | Y | string | ' ' | |
| areaDataSource | 组件初始化加载的第一级数据列表 | Y | Array | [ ] | 数据格式参考下方接口返回数据 |
| initValue | 默认值，该组件为非受控，默认值格式为[{ provCode: ' ', cityCode: ' ', districtCode: ' ', townCode: ' ', name: ' ', code: ' ' }], 其中provCode、cityCode、districtCode、townCode分别为省级市级区级镇级的code，name是当前显示的区域名称，如果是单选，name为拼接好，示例 "浙江省/杭州市/西湖区/古荡街道"，如果是多选，name即为当前显示最后一级区域名称。code为区域code，如果是单选，code暂无用处；如果是多选的话，为最后一个区域的code。 | - | Array | [{ }] | 单选数组长度为1，多选数组长度为大于1 |
| placeholder | 选择框占位符 | - | String | ' ' | |
| isPreview | 是否预览 | - | boolean | true | |
| multiple | 是否多选 | - | boolean | true | |
| disabled | 是否禁用 | - | Boolean | false | |
| readOnly | 是否只读，只读模式下可以展开弹层但不能选 | - | Boolean | false | |
| hasClear | 是否有清除按钮 | - | Boolean | false | |
| onChange | `选中值改变时触发的回调函数 (value)=>void; value:返回选中的省级市级区级镇级的code数组` | - | function | (value) => {} | |
## 接口返回数据以及请求参数
> 请求参数
```
parentCode: "110000" // 当前选中的区域code
```
> 接口返回的数据
⚠️注意：纪元使用绑定服务，接口返回的数据结构result要为一层。
```
// 说明
{
"enableDate": "Mon Jan 01 14:00:00 CST 2007",
"code": "130000", // 当前展示的区域code
"divLevel": 1, // 层级，值为1,2,3能继续向下拉取数据，值为4代表叶子节点，不能继续再向下拉取数据
"isFullName": 1,
"covered": false,
"name": "河北省", // 当前展示的区域名称
"style": 5,
"state": 1
}
// 返回数据示例
{
"ext": {},
"result": [
{
"enableDate": "Mon Jan 01 14:00:00 CST 2007",
"code": "130000",
"divLevel": 1,
"isFullName": 1,
"covered": false,
"name": "河北省",
"style": 5,
"state": 1
},
{
"enableDate": "Mon Jan 01 14:00:00 CST 2007",
"code": "150000",
"divLevel": 1,
"isFullName": 1,
"covered": false,
"name": "内蒙古自治区",
"style": 5,
"state": 1
},
]
"validateErrors": {},
"success": true,
"header": {
"date": "2021-04-07 20:37:13",
"traceId": "50cf8fcd1b287ce842d692c71f5d9ddb",
"rpcId": "0.1"
}
}
```