@hi-ui/tree-select NPM

TreeSelect 树形多项选择器

一种接收树形数据结构的选择器，为用户提供复杂数据展示的能力

何时使用

选择部门的组织结构、部门等
选择商品目录等

使用示例

Props

参数	说明	类型	可选值	默认值
data	展示数据	DataItem []	-	-
fieldNames	设置 data 中 id, title, disabled, children 对应的 key (3.0 新增)	object	-	{ title: 'title', id: 'id',disabled:'disabled', children: 'children'}
checkedMode	数据回显模式	string	ALL: 所有被选中节点，不区分父子节点 PARENT: 当所有子节点被选中时将只保留父节点CHILD:仅显示子节点	ALL
disabled	是否禁用	boolean	true \| false	false
defaultExpandAll	是否默认展开所有树节点	boolean	true \| false	false
expandedIds	展开的节点（受控）	ReactText[]	-	-
defaultExpandedIds	默认展开的节点（非受控）	ReactText[]	-	-
defaultValue	默认选中项（非受控）	ReactText	-	-
value	默认选中项（受控）	ReactText	-	-
displayRender	自定义渲染 Input 中展示内容	(valueItem: checkedNode) => ReactNode	-	-
placeholder	输入框占位	string	-	请选择
searchPlaceholder	搜索输入框占位	string	-	搜索
loadingContent	加载中文字提示	string	-	数据加载中...
searchMode	节点搜索模式	string	'highlight' \| 'filter'	-
dataSource	异步加载数据	(key: string) => DataSource \| DataSource \| Promise	-	-
emptyContent	没有选项时的提示	ReactNode	-	无内容
optionWidth	自定义下拉选项宽度	number	-
overlayClassName	下拉根元素的类名称	string	-	-
popper	自定义控制弹出层 popper 行为	Omit<PopperProps, 'visible' \| 'attachEl'>	-	-

Events

名称	说明	类型	参数	返回值
onChange	选中时触发	(checkedIds: ReactText[], checkedNodes: DataItem[], targetNode: DataItem, shouldChecked: boolean) => void	checkedIds: 选中项 ID 集合 checkedNodes: 选中项数据项集合 targetNode: 当前操作节点 shouldChecked: 是否要被选中	-

DataItem

参数	说明	类型	可选值	默认值
title	下拉选项标题	string	-	-
id	下拉选项唯一 id	string \| number	-	-
disabled	是否禁用	boolean	-	false
children	子级数据	DataItem[]	-	-

DataSource

参数	说明	类型	可选值	默认值
url	请求的 url	string	-	-
type	请求方法	string	get \| post	get
data	post 请求时请求体参数	object	-	-
params	url 查询参数	object	-	-
headers	请求头	object	-	-
mode	请求模式	string	'same-origin' \| 'cors' \| 'no-cors' \| 'navigate'	'same-origin'
transformResponse	成功时的回调，用于对数据进行预处理	(response: object) => DataItem[]	-	-

CHANGELOG

从原 TreeSelect 组件抽离单选模式出来，作为为单独单选的 TreeSelect 组件。

参数	变更类型	变更内容	解决的问题
propName	feature \| deprecated \| update	变更了什么	之前是什么样子，解决什么问题
----	----	----	----
value	update	类型 DataItem[] \| string[] \| string -> <string \| number>	对于表单控件 id 值的控制，均使用 React.ReactText（即 string 和 number 都支持）
defaultValue	update	类型 DataItem[] \| string[] \| string -> <string \| number>	对于表单控件 id 值的控制，均使用 React.ReactText（即 string 和 number 都支持）
id	update	类型 string -> string \| number	对于表单控件 id 值的控制，均使用 React.ReactText（即 string 和 number 都支持）
bordered	deprecated	字段 `bordered` -> `appearance`	对于 Picker 类型的组件，统一使用 appearance 设置外形（线\面\无边框）值
searchPlaceholder	feature	-	Picker 类型组件统一支持
loadingContent	feature	-	Picker 类型组件统一支持，适配新 UI
popper	feature	-	Picker 类型组件统一支持，聚合管理。比如： placement，之前有的加了有的没加
render	feature	-	统一支持自定义渲染每一项
virtual	feature	-	支持虚拟列表
height	feature	-	支持虚拟列表
itemHeight	feature	-	支持虚拟列表
type	deprecated	-	拆分单选多选组件单独维护
autoload	deprecated	-	页面级首次渲染执行数据加载操作，取消内置
mode	deprecated	-	面包屑模式可以使用 checkCascade 组件替代，交互形式更为优雅。
appearance	feature	-	统一支持：线性\面性\无边框
valueRender	update	valueRender(items: DataItem[]) -> displayRender(item: DataItem)	统一字段命名及其含义
expandedIds	update	字段：expandIds -> expandedIds	统一字段命名及其含义
defaultExpandedIds	update	defaultExpandIds -> defaultExpandedIds	统一字段命名及其含义
onChange	update	类型：`(checkedIds \\| checkedId, checkedNodes \\| checkedNode, currentNode) => void` -> `(checkedIds: ReactText[], checkedNodes: DataItem[], targetNode: DataItem, shouldChecked: boolean) => void`	1. 移除数组结构，方便用户获取；2. 暴露 shouldSelected 执行相应拦截之类的操作; 3. 点击清空时触发 onChange