logo
为了能更好地了解您的商业使用需求,请参与 Ant Design Blazor 商业应用调查,一起建设商业应用社区,为企业系统研发赋能!

Tree树形控件

多层次的结构列表。

何时使用

文件夹、组织架构、生物分类、国家地区等等,世间万物的大多数结构都是树形结构。使用 树控件 可以完整展现其中的层级关系,并具有展开收起选择等交互功能。

Examples

最简单的用法,展示可勾选,可选中,禁用,默认展开等功能。

expand code expand code

将节点拖拽到其他节点内部或前后。

expand code expand code

可以针对不同的节点定制图标。

expand code expand code

自定义展开/折叠图标。

expand code expand code

使用Checkable="false"来标记节点不可勾选。

注意:也可以使用CheckableExpression来动态设置节点是否可勾选。

expand code expand code

受控操作示例

expand code expand code

点击展开节点,动态加载数据。

expand code expand code

节点之间带连接线的树,常用于文件目录结构展示。使用 showLine 开启,可以用 switcherIcon 修改默认图标。

expand code expand code

内置的目录树,multiple 模式支持 ctrl(Windows) / command(Mac) 复选。

expand code expand code

使用 height 属性则切换为虚拟滚动。

expand code expand code

使用SelectableExpression来动态设置节点是否可选择。

注意:也可以使用Selectable="false"来标记节点不可选择。

expand code expand code

Tree API#

属性 描述 类型 默认值
ShowExpand 属性在节点前显示一个扩展图标 Boolean --
ShowLine 属性显示连接线 Boolean --
ShowIcon 属性显示树节点图标图标 Boolean --
BlockNode 属性treeNode是否填充剩余水平空间 Boolean --
Draggable 属性节点是否允许拖放 Boolean --
Disabled 属性树被禁用 Boolean --
ShowLeafIcon 属性显示子叶图标 Boolean --
SwitcherIcon 属性指定切换器的图标类型 String --
Nodes 属性树的节点。使用 AntDesign.Tree`1.DataSourceAntDesign.Tree`1.ChildContent RenderFragment --
ChildContent 属性树的节点。使用 AntDesign.Tree`1.DataSourceAntDesign.Tree`1.Nodes RenderFragment --
Selectable 属性是否可以选择 Boolean --
Multiple 属性允许选择多个树节点 Boolean --
DefaultSelectedKeys 属性 String[] --
DefaultSelectedKey 属性 String --
SelectedKey 属性@bind-SelectedKey String --
SelectedKeyChanged 属性@bind-SelectedKeys EventCallback<String> --
SelectedNode 属性@bind-SelectedNode TreeNode<TItem> --
SelectedNodeChanged 属性@bind-SelectedNode EventCallback<TreeNode<TItem>> --
SelectedData 属性@bing-SelectedData TItem --
SelectedDataChanged 属性@bind-SelectedData EventCallback<TItem> --
SelectedKeys 属性所选键 String[] --
SelectedKeysChanged 属性@bind-SelectedKeys EventCallback<String[]> --
SelectedNodes 属性所选节点的集合 TreeNode`1[] --
SelectedNodesChanged 属性@bind - 选定节点 EventCallback<TreeNode`1[]> --
SelectedDatas 属性所选数据集 TItem[] --
SelectedDatasChanged 属性@bind-SelectedDatas EventCallback<TItem[]> --
Checkable 属性在节点前添加一个 Checkbox Boolean --
CheckOnClickNode 属性如果可选中,请单击 TreeNodeTitle 来检查或取消选中节点 Boolean --
CheckStrictly 属性精确检查 treeNode;父树节点和子树节点没有关联 Boolean --
CheckedKeys 属性检查键 String[] --
CheckedKeysChanged 属性@bind-CheckedKeys EventCallback<String[]> --
DefaultCheckedKeys 属性指定默认选中的 treeNodes 的键 String[] --
DisableCheckKeys 禁用节点复选框 String[] --
SearchValue 属性搜索值 String --
SearchExpression 属性 Func<TreeNode<TItem>, Boolean> --
MatchedStyle 属性匹配搜索的节点部分的样式 String --
MatchedClass 属性匹配搜索的节点部分的类名 String --
HideUnmatched 属性 Boolean --
DataSource 属性树的数据源。可以是任何自定义对象类型的列表,通过提供表达式来获取子项、叶子、标题等。使用这个或 AntDesign.Tree`1.ChildContent 使用这个,AntDesign。 Tree`1.Nodes,或者AntDesign.Tree`1.ChildContent IEnumerable<TItem> --
TitleExpression 属性 Func<TreeNode<TItem>, String> --
KeyExpression 属性 Func<TreeNode<TItem>, String> --
IconExpression 属性 Func<TreeNode<TItem>, String> --
IsLeafExpression 属性 Func<TreeNode<TItem>, Boolean> --
ChildrenExpression 属性 Func<TreeNode<TItem>, IEnumerable<TItem>> --
DisabledExpression 属性 Func<TreeNode<TItem>, Boolean> --
CheckableExpression 属性指定返回可勾选节点的方法 Func<TreeNode<TItem>, Boolean> --
SelectableExpression 属性指定返回可选择节点的方法 Func<TreeNode<TItem>, Boolean> --
OnNodeLoadDelayAsync 属性延迟加载回调 EventCallback<TreeEventArgs<TItem>> --
OnClick 属性点击树节点回调 EventCallback<TreeEventArgs<TItem>> --
OnDblClick 属性双击节点回调 EventCallback<TreeEventArgs<TItem>> --
OnContextMenu 属性右键树节点回调 EventCallback<TreeEventArgs<TItem>> --
OnCheck 属性检查树节点回调 EventCallback<TreeEventArgs<TItem>> --
OnSelect 属性 EventCallback<TreeEventArgs<TItem>> --
OnUnselect 属性 EventCallback<TreeEventArgs<TItem>> --
OnExpandChanged 属性点击展开树节点图标回调 EventCallback<TreeEventArgs<TItem>> --
IndentTemplate 属性缩进模板 RenderFragment<TreeNode<TItem>> --
TitleTemplate 属性自定义标题模板 RenderFragment<TreeNode<TItem>> --
TitleIconTemplate 属性自定义图标模板 RenderFragment<TreeNode<TItem>> --
SwitcherIconTemplate 属性自定义切换图标模板 RenderFragment<TreeNode<TItem>> --
OnDragStart 属性拖放开始时调用 EventCallback<TreeEventArgs<TItem>> --
OnDragEnter 属性拖放到可释放目标时调用 EventCallback<TreeEventArgs<TItem>> --
OnDragLeave 属性当拖放远离可释放目标时调用 EventCallback<TreeEventArgs<TItem>> --
OnDrop 属性拖放成功时触发 EventCallback<TreeEventArgs<TItem>> --
OnDragEnd 属性拖放结束回调 EventCallback<TreeEventArgs<TItem>> --
ExpandOnClickNode 属性通过单击 TreeNodeTitle 展开或折叠节点 Boolean --
DefaultExpandAll 属性是否默认展开所有节点 Boolean false
DefaultExpandParent 属性父节点默认展开 Boolean --
DefaultExpandedKeys 属性默认展开指定的树节点 String[] --
ExpandedKeys 属性(controlled) 展开指定的树节点 String[] --
ExpandedKeysChanged 属性 EventCallback<String[]> --
OnExpand 属性 EventCallback<ValueTuple<String[], TreeNode<TItem>, Boolean>> --
AutoExpandParent 属性 Boolean --
Id 属性组件 HTML 的 ID String Uniquely Generated ID
Class 属性为 DOM 元素指定一个或多个类名。 String --
Style 属性指定 DOM 元素的内联样式。 String --
RefBack 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 ForwardRef --
方法签名 返回类型 描述
SelectAll() void 选择所有节点
DeselectAll() void 取消选择所有节点
CheckAll() void
UncheckAll() void 取消选中所有节点
GetNode(String key) TreeNode<TItem> 从 Key 获取 TreeNode
FindFirstOrDefaultNode(Func<TreeNode<TItem>, Boolean> predicate, Boolean recursive) TreeNode<TItem> 查找节点
ExpandAll(Func<TreeNode<TItem>, Boolean> predicate, Boolean recursive) void 展开所有节点
CollapseAll(Func<TreeNode<TItem>, Boolean> predicate, Boolean recursive) void 折叠所有节点

TreeNode API#

属性 描述 类型 默认值
Nodes 属性 RenderFragment --
ChildContent 属性 RenderFragment --
TreeLevel 当前节点级别 Int32 --
Key 属性指定当前节点的唯一标识符名称。 String --
Disabled 属性禁用状态以父节点为准 Boolean --
Selected 属性是否入选 Boolean --
SelectedChanged 属性当所选状态发生变化时触发 EventCallback<Boolean> --
Loading 属性加载状态是否异步(影响展开图标的显示) Boolean --
IsLeaf 属性是否为叶节点 Boolean --
Expanded 属性是否扩展节点 Boolean --
ExpandedChanged 属性 EventCallback<Boolean> --
Checked 属性检查 TreeNode Boolean --
CheckedChanged 属性 EventCallback<Boolean> --
Checkable 属性 Boolean --
Selectable 属性 Boolean --
DisableCheckbox 属性禁用复选框 Boolean --
Draggable 属性节点是否可拖动 Boolean --
Icon 属性节点前的图标 String --
IconTemplate 属性自定义图标模板 RenderFragment<TreeNode<TItem>> --
SwitcherIcon 属性指定切换器的图标 String --
SwitcherIconTemplate 属性自定义切换器图标模板 RenderFragment<TreeNode<TItem>> --
Title 属性节点的标题 String --
TitleTemplate 属性自定义标题模板 RenderFragment --
DataItem 属性节点的数据,它是数据源中的数据项 TItem --
Id 属性组件 HTML 的 ID String Uniquely Generated ID
Class 属性为 DOM 元素指定一个或多个类名。 String --
Style 属性指定 DOM 元素的内联样式。 String --
RefBack 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 ForwardRef --
方法签名 返回类型 描述
FindFirstOrDefaultNode(Func<TreeNode<TItem>, Boolean> predicate, Boolean recursive) TreeNode<TItem>
GetSiblingNodes() List<TreeNode<TItem>> 获取同级节点
GetPreviousNode() TreeNode<TItem> 获取上一个节点
GetNextNode() TreeNode<TItem> 获取下一个节点
SetSelected(Boolean value) void 设置选择状态
Expand(Boolean expanded) Task 展开节点
SetChecked(Boolean check) void 设置复选框状态
CheckAllChildren() void 检查所有子节点
UnCheckAllChildren() void 取消选中所有子节点
Tooltip文字提示 Alert警告提示
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.