Tree 树型控件

<Tree> 用于展示一个树结构数据。

获取组件

import { Tree } from 'rsuite';

演示

默认

显示缩进线

自定义树节点

可拖拽

虚拟化

异步载入子节点

可搜索

禁用树节点

滚动阴影

可访问性

ARIA 属性

tree

  • Tree 组件的 role 属性为 tree

treeitem

  • Tree 节点的 role 属性为 treeitem
  • aria-expanded 属性来指示树形列表框是否打开。
  • aria-selected 属性来指示树节点是否被选中。
  • aria-level 属性来指示树节点的层级。
  • aria-disabled 属性来指示树节点是否被禁用。

键盘交互

  • - 移动焦点到下一个树节点。
  • - 移动焦点到上一个树节点。
  • - 展开焦点树节点,如果它是折叠的。
  • - 折叠焦点树节点,如果它是展开的。
  • Enter - 选择焦点树节点。

Props

<Tree>

属性名称 类型 (默认值) 描述
childrenKey string ('children') 设置树节点的子节点在 data 中的 key
classPrefix string('picker') 组件 CSS 类的前缀
data * TreeNode 渲染树的数据
defaultExpandAll boolean 默认展开所有节点
defaultExpandItemValues string[] 设置默认展开节点的值
defaultValue string 默认选中的值
disabledItemValues string[] 设置禁用树节点的值
draggable boolean 是否可以拖拽
expandItemValues string[] 设置展开节点的值(受控)
getChildren (node: TreeNode) => Promise<TreeNode> 异步加载节点的子节点数据
height number (360px) 设置树的高度
labelKey string ('label') 设置树节点显示内容在 data 中的 key
listProps ListProps 虚拟化长列表的相关属性
onChange (value:string) => void 选中值改变的回调函数
onDragEnd (node: TreeNode, event) => void 拖拽结束的回调函数
onDragEnter (node: TreeNode, event) => void 拖拽进入的回调函数
onDragLeave (node: TreeNode, event) => void 拖拽离开的回调函数
onDragOver (node: TreeNode, event) => void 拖拽进入的回调函数
onDragStart (node: TreeNode, event) => void 拖拽开始的回调函数
onDrop (dropData: DropDataType, event) => void 拖拽结束的回调函数
onExpand (expandItemValues: string[], node: TreeNode, concat:(data, children) => Array) => void 树节点展示时的回调
onSearch (keyword: string) => void 搜索时回调
onSelect (node: TreeNode, value, event) => void 选择树节点后的回调
renderTreeIcon (node: TreeNode, expanded: boolean) => ReactNode 自定义渲染图标
renderTreeNode (node: TreeNode) => ReactNode 自定义渲染树节点
scrollShadow boolean 滚动时候显示内容区域的阴影
searchable boolean 是否显示搜索框
searchKeyword string 为搜索框设置搜索关键词
showIndentLine boolean 是否显示缩进线
value string 当前选中的值
valueKey string ('value') 设置树节点值在 data 中的 key
virtualized boolean 是否开启虚拟列表

TreeNode

interface TreeNode {
  /** The value of the option corresponds to the `valueKey` in the data. **/
  value: string | number;

  /** The content displayed by the option corresponds to the `labelKey` in the data. **/
  label: React.ReactNode;

  /** The data of the child option corresponds to the `childrenKey` in the data. */
  children?: TreeNode[];
}

ListProps

interface ListProps {
  /**
   * Size of a item in the direction being windowed.
   */
  itemSize?: number | ((index: number) => number);

  /**
   * Scroll offset for initial render.
   */
  initialScrollOffset?: number;

  /**
   * Called when the items rendered by the list change.
   */
  onItemsRendered?: (props: ListOnItemsRenderedProps) => void;

  /**
   * Called when the list scroll positions changes, as a result of user scrolling or scroll-to method calls.
   */
  onScroll?: (props: ListOnScrollProps) => void;
}

DropDataType

type DropDataType = {
  /** drag node data */
  dragNode: any;

  /** dropNode data */
  dropNode: any;

  /** node drop position */
  dropNodePosition: TREE_NODE_DROP_POSITION;

  /** Update Data when drop node */
  createUpdateDataFunction: (data: any[]) => any[];
};

enum TREE_NODE_DROP_POSITION {
  DRAG_OVER = 0, // drag node in tree node
  DRAG_OVER_TOP = 1, // drag node on tree node
  DRAG_OVER_BOTTOM = 2 // drag node under tree node
}

相关组件

  • <CheckTree> 用于展示一个树结构数据,同时支持 Checkbox 选择。
  • <TreePicker> 选择器组件,树形单项选择器。
  • <CheckTreePicker> 选择器组件,在 TreePicker 节点上支持 Checkbox,用于多选 。
Vercel banner