Tree 树型控件

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

获取组件

import { Tree } from 'rsuite';

// or
import Tree from 'rsuite/Tree';

演示

默认

显示缩进线

可拖拽

异步加载

Props

<Tree>

属性名称 类型 (默认值) 描述
childrenKey string ('children') tree 数据结构 children 属性名称
classPrefix string('picker') 组件 CSS 类的前缀
data * ItemDataType tree 数据
defaultExpandAll boolean 默认展开所有节点
defaultExpandItemValues string[] 设置默认展开节点的值
defaultValue string 默认选中的值
disabledItemValues string[] 禁用选项
draggable boolean 是否可以拖拽
expandItemValues string[] 设置展开节点的值(受控)
getChildren (item: ItemDataType) => Promise<ItemDataType> 异步加载节点数据
height number (360px) menu 的高度。当设置了 virtualized 为 true 时, 可以通过 height 控制 menu 的高度
labelKey string ('label') tree 数据结构 label 属性名称
listProps ListProps 虚拟化长列表的相关属性
onChange (value:string) => void 数据改变的回调函数
onDragEnd (item: ItemDataType, event) => void drag end 回调
onDragEnter (item: ItemDataType, event) => void drag enter 回调
onDragLeave (item: ItemDataType, event) => void drag leave 回调
onDragOver (item: ItemDataType, event) => void drag over 回调
onDragStart (item: ItemDataType, event) => void drag start 回调
onDrop (dropData: DropDataType, event) => void drop 回调
onExpand (expandItemValues: string[], item: ItemDataType, concat:(data, children) => Array) => void 树节点展示时的回调
onSelect (item: ItemDataType, value, event) => void 选择树节点后的回调函数
renderTreeIcon (item: ItemDataType) => ReactNode 自定义渲染 图标
renderTreeNode (item: ItemDataType) => ReactNode 自定义渲染 tree 节点
searchKeyword string (受控)搜索关键词
showIndentLine boolean 是否显示缩进线
value string 当前选中的值
valueKey string ('value') tree 数据结构 value 属性名称
virtualized boolean 是否开启虚拟列表

ts:ItemDataType

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

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

  /**
   * The data of the child option corresponds to the `childrenKey` in the data.
   * Properties owned by tree structure components, such as TreePicker, Cascader.
   */
  children?: ItemDataType[];

  /**
   * Properties of grouping functional components, such as CheckPicker, InputPicker
   */
  groupBy?: string;

  /**
   * The children under the current node are loading.
   * Used for components that have cascading relationships and lazy loading of children. E.g. Cascader, MultiCascader
   */
  loading?: boolean;
}

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,用于多选 。
Vercel banner