[comp:tree] api

[danranVm]

• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

IxTree

TreeProps

名称	说明	类型	默认值	全局配置	备注
v-model:checkedKeys	选中选择框节点的 key 数组	(string \| number)[]	-	-	-
v-model:expandedRowKeys	展开节点的 key 数组	(string \| number)[]	-	-	-
v-model:selectedRowKeys	选中节点的 key 数组	(string \| number)[]	-	-	-
block	节点整行撑开	boolean	false	✅	-
checkable	选择框的相关配置项，参见TreeCheckable	TreeCheckable	-	-	-
childrenKey	指定树形结构的 key	string	children	-	-
dataSource	树型数据数组	object[]	-	-	-
draggable	拖拽功能的相关配置项，参见TreeDraggable	TreeDraggable	-	-	-
droppable	拖拽功能的相关配置项，参见TreeDroppable	TreeDroppable	-	-	-
empty	空数据时的内容	string \| EmptyProps \| #empty	-	-	-
expandable	展开功能的相关配置项，参见TreeExpandable	TreeExpandable	-	-	-
height	设置虚拟滚动容器高度	number	-	-	-
nodeKey	节点 key 的取值	string \| record => string \| number	key	✅	-
selectable	选择功能的相关配置项，参见TreeSelectable	TreeSelectable	-	-	-
showLine	是否显示连接线	boolean	false	✅	-
useVirtual	是否开启虚拟滚动	boolean	false	-	需要设置 height
onNodeClick	节点点击事件	(evt: Event, node: TreeNode) => void	-	-	-
onNodeContextmenu	节点右击事件	(evt: Event, node: TreeNode) => void	-	-	-

TreeNode

名称	说明	类型	默认值	全局配置	备注
additional	节点的扩展属性	object	-	-	可以用于设置节点的 class, style 或者其他属性
children	子节点数据	TreeNode[]	-	-	-
disabled	禁用节点	boolean \| { checkable: boolean, expandable: boolean, draggable: boolean, droppable: boolean}	-	-	为 true 时，优先级高于 TreeProps
isLeaf	设置为叶子节点	boolean	-	-	为 false 时会强制将其作为父节点，配合 loadChildren 使用
key	节点的唯一标识	string \| number	-	-	如果不设置，则需要通过 TreeProps 中的 nodeKey 设置唯一值
label	节点的文本	string	-	-	-
prefix	前缀图标	string	-	-	-
suffix	后缀图标	string	-	-	-

TreeCheckable

名称	说明	类型	默认值	全局配置	备注
disabled	设置节点选择框是否允许勾选	(node: TreeNode) => boolean	-	-	-
onChange	选择框勾选状态发生变化时触发	(checkedKeys: (string \| number)[], checkedNodes: TreeNode[]) => void	-	-	-
onCheck	选择框勾选状态发生变化时触发	(checked: boolean, node: TreeNode) => void	-	-	-

TreeDraggable

名称	说明	类型	默认值	全局配置	备注
disabled	设置节点是否允许拖拽	(node: TreeNode) => boolean	-	-	-
onDragStart	dragstart 触发时调用	(evt: DragEvent, node: TreeNode) => void	-	-	-
onDragEnd	dragend 触发时调用	(evt: DragEvent, node: TreeNode) => void	-	-	-
onDragEnter	dragenter 触发时调用	(evt: DragEvent, node: TreeNode) => void	-	-	-
onDragLeave	dragleave 触发时调用	(evt: DragEvent, node: TreeNode) => void	-	-	-
onDragOver	dragover 触发时调用	(evt: DragEvent, node: TreeNode) => void	-	-	-

TreeDroppable

名称	说明	类型	默认值	全局配置	备注
disabled	拖拽时是否允许放置在该节点	(options: TreeDropOptions) => boolean	-	-	-
onDrop	drop 触发时调用	(evt: DragEvent, options: TreeDropOptions) => void	-	-	-

TreeExpandable

名称	说明	类型	默认值	全局配置	备注
disabled	设置节点是否允许展开	(node: TreeNode) => boolean	-	-	-
icon	展开图标	string	right	✅	-
loadChildren	加载子节点数据	(node: TreeNode) => Promise<TreeNode[]>	-	-	-
loadedKeys	已经加载完毕的节点的 key	(string \| number)[]	-	-	-
onChange	展开状态发生变化时触发	(expendedKeys: (string \| number)[], expendedNodes: TreeNode[]) => void	-	-	-
onExpand	点击展开图标时触发	(expanded: boolean, node: TreeNode) => void	-	-	-
onLoaded	子节点加载完毕时触发	(node: TreeNode, loadedKeys: (string \| number)[]) => void	-	-	-

TreeSelectable

名称	说明	类型	默认值	全局配置	备注
disabled	设置节点是否允许选择	(node: TreeNode) => boolean	-	-	-
multiple	是否支持多选	boolean	true	-	-
onChange	选中状态发生变化时触发	(selectedKeys: (string \| number)[], selectedNodes: TreeNode[]) => void	-	-	-
onSelect	选中状态发生变化时触发	(selected: boolean, node: TreeNode) => void	-	-	-

TreeSlots

名称	说明	参数类型	备注
expandIcon	自定义展开图标	{key: string \| number, expanded: boolean, node: TreeNode}	-
label	自定义节点的文本	{node: TreeNode}	-
prefix	自定义节点的前缀图标	{key: string \| number, checked: boolean, expanded: boolean, selected: boolean, node: TreeNode}	-
suffix	自定义节点的后缀图标	{key: string \| number, checked: boolean, expanded: boolean, selected: boolean, node: TreeNode}	-

TreeMethods

名称	说明	参数类型	备注
scrollTo	虚拟滚动下，滚动到指定位置	(value?: number \| ScrollToConfig) => void	-

[idux-bot[bot]]

Translation of this issue:

[COMP: TREE] API

• [] I have searched the [issues] (https://github.com/IDuxFE/idux/issues) of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

IxTree

TreeProps

Name	Description	Type	defaults	Global	Notes
V-model: checkedKeys	check the box nodekey array	(string \ | number) []	-	-	-
V-model: expandedRowKeys	Expandkey array of nodes	(string \ | number) []	-	-	-
V-model: selectedRowKeys	key array of selected nodes	(string \ | number) []	-	-	-
Block	nodes entire row distraction	boolean	false	✅	-
Checkable	the selection box configuration items, see [TreeCheckable] (# TreeCheckable)	TreeCheckable	-	-	-
ChildrenKey	key designated tree structure	string	children	-	-
DataSource	tree data array	object []	-	-	-
Related item drop functionality, see [TreeDraggable] (# TreeDraggable)		draggable`` TreeDraggable	-	-	-
Empty	contents when empty data	string \ | EmptyProps \ | # empty	-	-	-
Expandable	expanded configuration items related functions, see [TreeExpandable] (# TreeExpandable)	TreeExpandable	-	-	-
Height	set up a virtual scroll container height	number	-	-	-
NodeKey	nodekey values ​​	string \ | record => string \ | number	key	✅	-
Related item selection function, see [TreeSelectable] (# TreeSelectable)		selectable`` TreeSelectable	-	-	-
ShowLine	whether cable	boolean	false	✅	-
UseVirtual	whether to open the virtual scroll	boolean	false	-	need to setheight
OnNodeClick	node click event	(evt: Event, node: T) => void	-	-	-
OnNodeContextmenu	node right click event	(evt: Event, node: T) => void	-	-	-

TreeNode

Name	Description	Type	defaults	Global	Notes
Disabled	disabled node	boolean \ | {checkable: boolean, expandable: boolean, draggable: boolean, droppable: boolean}	-	-	istrue, higher priority than TreeProps
IsLeaf	to leaf nodes	boolean	-	-	will force its parent node, with the loadChildren used asfalse
Text nodes		label`` string	-	-	-
Prefix	prefix icon	string	-	-	-
Suffix	suffix icon	string	-	-	-

TreeCheckable

Name	Description	Type	defaults	Global	Notes
Disabled	set whether to allow check node selection box	(node: T) => boolean	-	-	-
OnChange	triggered when selecting check box status changes	(checkedKeys: (string \ | number) [], checkedNodes: T []) => void	-	-	-
OnCheck	triggered when selecting check box status changes	(checked: boolean, node: T) => void	-	-	-

TreeDraggable

Name	Description	Type	defaults	Global	Notes
Disabled	node is arranged to allow a drag	(node: T) => boolean	-	-	-
Droppable	drag, if allowed to stand at the node	({dropNode, dropPosition}) => boolean	-	-	-
OnDragStart	called whendragstart trigger	(evt: DragEvent, node: T) => void	-	-	-
OnDragEnd	called whendragend trigger	(evt: DragEvent, node: T) => void	-	-	-
OnDragEnter	called whendragenter trigger	(evt: DragEvent, node: T) => void	-	-	-
OnDragLeave	called whendragleave trigger	(evt: DragEvent, node: T) => void	-	-	-
OnDragOver	called whendragover trigger	(evt: DragEvent, node: T) => void	-	-	-
OnDrop	called whendrop trigger	(evt: DragEvent, node: T) => void	-	-	-

TreeExpandable

Name	Description	Type	defaults	Global	Notes
Disabled	Settings node whether to allow expanded	(node: T) => boolean	-	-	-
Icon	Expand icon	string	right	✅	-
LoadChildren	loads the child node data	(node: T) => Promise <T []>	-	-	-
Key already loaded nodes			loadedKeys (string \ | number) []	-	-	-
OnChange	trigger state changes unfold	(expendedKeys: (string \ | number) [], expendedNodes: T []) => void	-	-	-
OnExpand	Click to trigger the expand icon	(expanded: boolean, node: T) => void	-	-	-
OnLoaded	triggered when a child node is loaded	(node: T, loadedKeys: (string \ | number) []) => void	-	-	-

TreeSelectable

Name	Description	Type	defaults	Global	Notes
Disabled	provided to select whether to allow the node	(node: T) => boolean	-	-	-
Multiple	supports multiple choice	boolean	true	-	-
OnChange	triggered when selected changes	(selectedKeys: (string \ | number) [], selectedNodes: T []) => void	-	-	-
OnSelect	triggered when selected changes	(selected: boolean, node: T) => void	-	-	-

TreeSlots

Name	Description	Parameter Type	Notes
ExpandIcon	Customize expand icon	{key: string \ | number, expanded: boolean, node: TreeNode}	-
Label	custom text node	{node: TreeNode}	-
Prefix	icon from prefix defined nodes	{key: string \ | number, checked: boolean, expanded: boolean, selected: boolean, node: TreeNode}	-
Suffix	self-defined icons suffix node	{key: string \ | number, checked: boolean, expanded: boolean, selected: boolean, node: TreeNode}	-

TreeMethods

Name	Description	Parameter Type	Notes
ScrollTo	virtual scroll, scroll to the specified location	(value ?: number | ScrollToConfig) => void	-