[comp: tree select]: 新增树型选择组件

[liuzaijiang]

• 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?

API

IxTreeSelect

TreeSelectProps

名称	说明	类型	默认值	全局配置	备注
control	控件控制器	string | number | AbstractControl	-	-	配合 @idux/cdk/forms 使用, 参考 Form
v-model:value	选中节点的 key 数组	VKey[]	-	-	-
v-model:expandedKeys	展开节点的 key 数组	VKey[]	-	-	-
v-model:loadedKeys	已经加载完毕的节点的 key 数组	VKey[]	-	-	-
v-model:open	下拉菜单是否展开	boolean	-	-	-
autofocus	默认获取焦点	boolean	false	-	-
cascade	是否开启级联功能	boolean	false	-	仅在 multiple 和 checkable 为 true 时生效
clearable	是否显示清除图标	boolean	false	-	-
checkable	是否显示选择框	boolean	false	-	仅在 multiple 为 true 时生效
childrenKey	替代TreeSelectNode中的children字段	string	children	✅	-
checkStrategy	勾选策略	'all' | 'parent' | 'child'	'all'	-	设置勾选策略来指定显示的勾选节点，all 表示显示全部选中节点；parent 表示只显示父节点（当父节点下所有子节点都选中时）；child 表示只显示子节点，仅当cascade为true时，parent和child才生效
dataSource	树型数据数组,参见TreeSelectNode	TreeSelectNode[]	[]	-	-
disabled	是否禁用状态	boolean	false	-	-
draggable	是否允许拖拽节点	boolean	false	-	-
droppable	是否允许放置节点,参见TreeDroppable	TreeDroppable	-	-	-
empty	空数据时的内容	string | EmptyProps	-	-	-
expandIcon	树组件中的展开图标	string	right	✅	-
maxLabelCount	最多显示多少个标签	number	-	-	-
multiple	多选模式	boolean	false	-	-
nodeKey	替代TreeSelectNode中的key字段	string | (node: TreeSelectNode) => VKey	key	✅	-
labelKey	替代TreeSelectNode中的label字段	string	label	✅	-
leafLineIcon	叶子节点的图标，用于替换默认的连接线	string	-	-	仅在 showLine 时生效
loadChildren	加载子节点数据	(node: TreeSelectNode) => Promise<TreeSelectNode[]>	-	-	-
searchFn	搜索函数	(node: TreeSelectNode, searchValue?: string) => boolean	-	-	-
searchable	是否开启搜索功能	boolean | 'overlay'	-	-	当为 true 时搜索功能集成在选择器上，当为 overlay 时，搜索功能集成在悬浮层上
showLine	是否显示连接线	boolean	false	✅	-
size	设置选择器大小	'sm' | 'md' | 'lg'	md	✅	-
suffix	设置后缀图标	string | #suffix	down	✅	-
target	自定义浮层容器节点	string | HTMLElement | () => string | HTMLElement	-	✅	-
treeDisabled	树的禁用节点的函数	参考 Tree	-	-	-
virtual	是否开启虚拟滚动	boolean	false	-	-
overlayClassName	下拉菜单的 class	string	-	-	-
overlayRender	自定义下拉菜单内容的渲染	(children:VNode[]) => VNodeTypes	-	-	-
placeholder	选择框默认文本	string	-	-	-
readonly	只读模式	boolean	-	-	-
onChange	选择值发生变化时触发	(value: any, oldValue: any, node: TreeSelectNode | TreeSelectNode[] => void	-	-	-
onCheck	选择框勾选状态发生变化时触发	(checked: boolean, node: TreeSelectNode) => void	-	-	-
onDragStart	dragstart 触发时调用	(options: TreeDragDropOptions) => void	-	-	-
onDragEnd	dragend 触发时调用	(options: TreeDragDropOptions) => void	-	-	-
onDragEnter	dragenter 触发时调用	(options: TreeDragDropOptions) => void	-	-	-
onDragLeave	dragleave 触发时调用	(options: TreeDragDropOptions) => void	-	-	-
onDragOver	dragover 触发时调用	(options: TreeDragDropOptions) => void	-	-	-
onDrop	drop 触发时调用	(options: TreeDragDropOptions) => void	-	-	-
onExpand	点击展开图标时触发	(expanded: boolean, node: TreeSelectNode) => void	-	-	-
onExpandedChange	展开状态发生变化时触发	(expendedKeys: VKey[], expendedNodes: TreeSelectNode[]) => void	-	-	-
onLoaded	子节点加载完毕时触发	(loadedKeys: VKey[], node: TreeSelectNode) => void	-	-	-
onSearchedChange	搜索状态发生变化时调用	(searchedKeys: VKey[], searchedNodes: TreeSelectNode[]) => void	-	-	-
onSelect	选中状态发生变化时触发	(selected: boolean, node: TreeSelectNode) => void	-	-	-
onNodeClick	节点点击事件	(evt: Event, node: TreeSelectNode) => void	-	-	-
onNodeContextmenu	节点右击事件	(evt: Event, node: TreeSelectNode) => void	-	-	-
onScroll	滚动事件	(evt: Event) => void	-	-	-
onScrolledChange	滚动的位置发生变化	(startIndex: number, endIndex: number, visibleNodes: TreeSelectNode[]) => void	-	-	仅 virtual 模式下可用
onScrolledBottom	滚动到底部时触发	() => void	-	-	仅 virtual 模式下可用

TreeSelectNode

名称	说明	类型	默认值	全局配置	备注
additional	节点的扩展属性	object	-	-	可以用于设置节点的 class, style 或者其他属性
children	子节点数据	TreeNode[]	-	-	-
disabled	禁用节点	boolean | TreeNodeDisabled	-	-	为 true 时，优先级高于 TreeProps
isLeaf	设置为叶子节点	boolean	-	-	为 false，且设置了 loadChildren 时会强制将其作为父节点
key	节点的唯一标识	VKey	-	-	-
label	节点的文本	string	-	-	-
prefix	前缀图标	string	-	-	-
suffix	后缀图标	string	-	-	-

TreeSelectSlots

名称	说明	参数类型	备注
empty	自定义当下拉列表为空时显示的内容	-	-
expandIcon	节点展开图标	{key: VKey, expanded: boolean, node: TreeSelectNode}	-
label	自定义选中的标签	{node: RawNode}	RawNode为用户传入的数据结构
leafLineIcon	叶子节点的图标，用于替换默认的连接线	-	仅在 showLine 时生效
maxLabel	自定义超出最多显示多少个标签的内容	{nodes: RawNode[]}	参数为超出的数组
suffix	后缀图标	-	-
placeholder	选择框默认文本	-	-
treeLabel	自定义节点的文本	{node: TreeSelectNode}	-
treePrefix	自定义节点的前缀图标	{key: VKey, selected: boolean, node: TreeSelectNode}	-
treeSuffix	自定义节点的后缀图标	{key: VKey, selected: boolean, node: TreeSelectNode}	-

TreeSelectMethods

名称	说明	参数类型	备注
blur	失去焦点	-	-
focus	获取焦点	-	-
scrollTo	滚动到指定位置	(option?: number | VirtualScrollToOptions) => void	仅 virtual 模式下可用
setExpandAll	控制树节点是否全部展开	(isAll: boolean) => void	-