[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]

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 node key array	`(string \	number) []`	-	-
V-model: expandedRowKeys	Expand key 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	node key 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 set height
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} `	-	-
IsLeaf	to leaf nodes	boolean	-	-	will force its parent node, with the loadChildren used as false
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 when dragstart trigger	(evt: DragEvent, node: T) => void	-	-	-
OnDragEnd	called when dragend trigger	(evt: DragEvent, node: T) => void	-	-	-
OnDragEnter	called when dragenter trigger	(evt: DragEvent, node: T) => void	-	-	-
OnDragLeave	called when dragleave trigger	(evt: DragEvent, node: T) => void	-	-	-
OnDragOver	called when dragover trigger	(evt: DragEvent, node: T) => void	-	-	-
OnDrop	called when drop 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`