Tree 树型控件 #

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

获取组件 #

演示 #

默认 #

显示缩进线 #

自定义树节点 #

可拖拽 #

虚拟化 #

异步载入子节点 #

可搜索 #

禁用树节点 #

滚动阴影 #

可访问性 #

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	是否开启虚拟列表

ts: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[];
}

ts: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;
}

ts: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，用于多选 。