CheckCascader 级联多项选择

一种接收数据的容器，为用户提供选择一部分数据的能力

何时使用

需要从大量的离散型数据中选择一部分时使用

备选项数量 5 个以上时

不需要将全部备选项都展示给用户时

使用示例

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------------- | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ------------------ | ------------------------------------------------------- | | disabled | 是否禁止使用 | boolean | true | false | false | | placeholder | 输入框占位 | string | - | '请选择' | | searchPlaceholder | 搜索输入框占位 | string | - | '搜索' | | emptyContent | 设置选项为空时展示的内容 | ReactNode | - | '无匹配数据' | | loadingContent | 设置加载中时展示的内容 | ReactNode | - | '数据加载中...' | | overlayClassName | 下拉根元素的类名称 | string | - | - | | searchable | 是否可搜索 | boolean | true | false | false | | clearable | 是否可清空 | boolean | true | false | true | | overlay | 自定义控制弹出层 popper 行为 | PopperOverlayProps | - | - | | fieldNames | 设置 data 中 label, value, children 对应的 key | object | - | { label: 'label', value: 'value', children: 'children'} | | data | 设置选择项数据源 | CheckCascaderDataItem[] | - | - | | value | 设置当前选中值 | ReactText[] | - | [] | | defaultValue | 设置当前选中值默认值 | ReactText[] | - | [] | | displayRender | 自定义选择后展示的内容 | (value: string[]) => string | - | - | | expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | 'click' | 'hover' | 'click' | | filterOption | 第一个参数为输入的关键字，第二个为数据项，返回值为 true 时将出现在结果项。仅在 searchable 为 true 时有效 | (keyword: string, item: DataItem) => boolean | - | - | | changeOnSelect | 是否启用选择即改变功能 | boolean | true | false | false | | upMatch | 开启全量搜索，默认只对开启对可选的选项进行搜索，不向上查找路径 | true | false | false | | render | 自定义渲染节点的 title 内容径 | (item: CheckCascaderItemEventData) => React.ReactNode | - | | filterOption | 自定义搜索过滤器，仅在 searchable 为 true 时有效。第一个参数为输入的关键字，第二个为数据项，返回值为 true 时将出现在结果项 | (keyword: string, item: CheckCascaderItemEventData) => boolean | - |

Events

| 名称 | 说明 | 类型 | 参数 | 返回值 | | ------------------ | ------------------ | ----------------------------------------------------------------------------------------------------------- | ------------------ | ------ | | onChange | 选择后的回调 | (values: ReactText[]) => void | values: 选中项集合 | - | | onActiveItemChange | 选中项改变时的回调 | (values: string[]) => void | values: 选中项集合 | - | | onOpen | 下拉菜单打开时回调 | () => void | - | - | | onClose | 下拉菜单关闭时回调 | () => void | - | - | | onLoadChildren | 异步请求更新数据 | (item: CheckCascaderItemEventData, idPaths: React.ReactText[]) => Promise<CascaderItem[] | void> | void | - | - |

Type

CheckCascaderDataItem

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | -------- | ------- | ------------- | ------ | | id | 选择项值 | string | - | - | | title | 选择项 | string | - | - | | disabled | 是否禁用 | boolean | true | false | false |

CheckCascaderItemEventData

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | -------------------------------- | -------- | ------------- | ------ | | id | 选择项值 | string | - | - | | title | 选择项 | string | - | - | | disabled | 是否禁用 | boolean | true | false | false | | depth | 选项的层级，根节点层级为 0 | number | - | - | | raw | 原始数据，包括约定模型之外的数据 | object | - | - | | parent | 选项的父级节点数据 | object | - | - | | children | 选项的孩子节点列表数据 | object[] | - | - | | selected | 节点是否被选中 | boolean | true | false | - | | loading | 节点是否在异步加载子项数据中 | boolean | true | false | - | | focused | 节点是否被聚焦 | boolean | true | false | - |

DataSource

继承 Axios 的 api

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------------- | ---------------------------------- | -------------------------------- | ------------- | ------ | | url | 请求的 url | string | - | - | | method | 请求方法 | string | get | post | get | | data | post 请求时请求体参数 | object | - | - | | params | url 查询参数 | object | - | - | | headers | 请求头 | object | - | - | | withCredentials | 上传请求时是否携带 cookie | boolean | true | false | false | | transformResponse | 成功时的回调，用于对数据进行预处理 | (response: object) => DataItem[] | - | - | | error | 请求发生异常的回调方法 | (error: object) => void | - | - |

CHANGELOG

| 参数 | 变更类型 | 变更内容 | 解决的问题 | | ------------- | ------------------------------- | ---------- | ------------------------------------------------------------------------------------------------ | | propName | feature | deprecated | update | 变更了什么 | 之前是什么样子，解决什么问题 | | ---- | ---- | ---- | ---- | | checkCascaded | feature | - | 支持级联选择开关控制 | | overlay | feature | - | Picker 类型组件统一支持，聚合管理。比如： placement setOverlayContainer 等，之前有的加了有的没加 |