@hi-ui/check-cascader NPM

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 等，之前有的加了有的没加