概述

PC端地区选择基础交互组件

使用方式

    npm install --save @beisen-phoenix/area-selector

API说明

| 参数 | 说明 | 类型 | 默认值 | 必须 | | --- | --- | --- | --- | --- | | isMulti | 单选/多选 | boolean | false | Yes | | required | 多选保存时，是否校验选中数据为空 | boolean | true | No | | defaultData | 默认选中的值 | Array [{id: 地区id, label: 地区显示名称}] | 无 | Yes | | value | 当前值，设置此值则为受控组件 | Array [{id: 地区id, label: 地区显示名称}] | 无 | Yes | | getDataUrl | 数据常量请求链接 | String | "//const.italent.cn/resource/Areas-chs-74-100000.js" | No | | showForeignSource | 显示国外的数据选项 | Boolean | true | No | | areaData | 自定义数据源地区的值 | Object | 无 | No | | onSubmit | 确定方法 | Function | 无 | Yes | | visible | 用于手动控制确认框显隐 | boolean | false | No | | translation | 多语言常量值 | object | translation: {clearText: "清空已选",selectDataText: "已选地区",allProvincesText: "全部省市",countryText: "国家",cancelText: '取消',submitText: '确定',selectDataEmptyText: "请在左侧选择地区"} | Yes | | limit | 复选的情况下,可以配置最多能选择的数据条数,达到该数据后,不可再选择| number | 40 | | showLimit | 复选的情况下，是否显示最多数据条数 | boolean | true | | maxExpandLevel | 最大钻取深度 | number | No，即不设限制 | | showParentInSelection | 已选区域属性，是否带直属父级，true 则显示为 上一级名／当前名，false 显示为 当前名 | boolean | false | | showRootInSelection | 已选区域属性，是否带所有父级，true 则显示为 第一级/第二级/.../上一级/当前名， false 则会走showParentInSelection配置 | boolean | false | | isActiveLinkRelation | 是否开启父子联动 | boolean | false | | selectedLevel | 选定层级：1）如选定层级小于等于钻取层级，则选定层级和之后的层级均显示复选框可进行勾选；之前的层级复选框隐藏不可进行勾选；（2）如选定层级大于钻取层级，则钻取层级的末级显示复选框可进行勾选，末级之前的层级复选框隐藏不可进行勾选；如果末级为一级，则显示复选框 | number | 不设限制 |

数据格式注意

• getDataUrl

  getDataUrl是北森提供的标准地区常量数据源地址,返回数据有严格规定。如果你想要使用自定义的数据源,则需要使用areaData属性。

  getDataUrl默认是返回的数据是现在是中文版本，如果是其他语言版本需要自己拼接链接，比如: http://const.italent.cn/resource/Areas-en-74-100000.js.

  数据返回的内容格式如下：

  ConstAreas([
      ["1",["全国"],"",0],
      ["2",["国外"],"",1],
      ....
  ])

数据解释及含义["1",["全国"],"",0] 数组的第一个元素代表地区的id， 第二个代表显示的文字， 第三个代表数据的父级元素、 第四个元素代表是否含有子地区

地区数据的全国和国外id为1、2，parentId为空，都应该是含有子节点的

• areaData的数据单项格式["1",["国内"], "" , 0] 数据含义的解释如上

样式属性

const propsData = {
    isMuiti: false,
    selectData: [{
        id: "1001",
        label: "顺义区"
    }],
    areaData: [
        ["1",["国内"], "" , ""]
        ...
    ]
}