Ant Design Blazor
Tree树形控件
多层次的结构列表。
何时使用
文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用 树控件 可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
Examples
最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。
将节点拖拽到其他节点内部或前后。
点击展开节点，动态加载数据。
节点之间带连接线的树，常用于文件目录结构展示。使用 showLine 开启，可以用 switcherIcon 修改默认图标。
内置的目录树，multiple 模式支持 ctrl(Windows) / command(Mac) 复选。
使用 height 属性则切换为虚拟滚动。
使用SelectableExpression来动态设置节点是否可选择。
注意：也可以使用
Selectable="false"来标记节点不可选择。
受控操作示例
使用DraggableExpression和DroppableExpression精确控制拖放节点。
可搜索的树。
可以使用 SearchExpression 来自定义匹配规则，也可以指定 HideUnmatched 来只显示匹配搜索值的节点（以及它们的直接父节点）。
可以针对不同的节点定制图标。
自定义展开/折叠图标。
使用Checkable="false"来标记节点不可勾选。
注意：也可以使用
CheckableExpression来动态设置节点是否可勾选。
Tree API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| AllNodes | Readonly collection of all nodes | IReadOnlyCollection<TreeNode<TItem>> | -- |
| ShowExpand | 属性在节点前显示一个扩展图标 | Boolean | -- |
| ShowLine | 属性显示连接线 | Boolean | -- |
| ShowIcon | 属性显示树节点图标图标 | Boolean | -- |
| BlockNode | 属性treeNode是否填充剩余水平空间 | Boolean | -- |
| Draggable | 属性节点是否允许拖放 | Boolean | -- |
| Disabled | 属性树被禁用 | Boolean | -- |
| ShowLeafIcon | 属性显示子叶图标 | Boolean | -- |
| SwitcherIcon | 属性指定切换器的图标类型 | String | -- |
| Nodes | 属性树的节点。使用 AntDesign.Tree`1.DataSource 或 AntDesign.Tree`1.ChildContent |
RenderFragment | -- |
| ChildContent | 属性树的节点。使用 AntDesign.Tree`1.DataSource 或 AntDesign.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>> | -- |
| DraggableExpression | 属性Whether the node can be dragged | Func<TreeNode<TItem>, Boolean> | -- |
| DroppableExpression | 属性Whether the target accepts the dragging node 正在被拖动的节点（拖拽起点）目标接收节点（拖放终点）是否目标节点下方（true=目标节点下面/false=目标节点内部，即拖动的节点成为目标节点的子节点） |
Func<TreeNode<TItem>, TreeNode<TItem>, Boolean, Boolean> | -- |
| 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> | 获取下一个节点 |
| GetParentNode() | TreeNode<TItem> | Gets the parent node. |
| SetSelected(Boolean value) | void | 设置选择状态 |
| Expand(Boolean expanded) | Task | 展开节点 |
| SetChecked(Boolean check) | void | 设置复选框状态 |
| CheckAllChildren() | void | 检查所有子节点 |
| UnCheckAllChildren() | void | 取消选中所有子节点 |