Tree 树型控件
<Tree>
用于展示一个树结构数据。
获取组件
import { Tree } from 'rsuite';
演示
默认
显示缩进线
可拖拽
虚拟化
异步载入子节点
可搜索
Props
<Tree>
属性名称 | 类型 (默认值) |
描述 |
---|---|---|
childrenKey | string ('children') |
tree 数据结构 children 属性名称 |
classPrefix | string('picker') |
组件 CSS 类的前缀 |
data * | TreeNode | tree 数据 |
defaultExpandAll | boolean | 默认展开所有节点 |
defaultExpandItemValues | string[] | 设置默认展开节点的值 |
defaultValue | string | 默认选中的值 |
disabledItemValues | string[] | 禁用选项 |
draggable | boolean | 是否可以拖拽 |
expandItemValues | string[] | 设置展开节点的值(受控) |
getChildren | (node: TreeNode) => Promise<TreeNode> | 异步加载节点数据 |
height | number (360px) |
menu 的高度。当设置了 virtualized 为 true 时, 可以通过 height 控制 menu 的高度 |
labelKey | string ('label') |
tree 数据结构 label 属性名称 |
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) => ReactNode | 自定义渲染 图标 |
renderTreeNode | (node: TreeNode) => ReactNode | 自定义渲染 tree 节点 |
searchable | boolean | 是否显示搜索框 |
searchKeyword | string | (受控)搜索关键词 |
showIndentLine | boolean | 是否显示缩进线 |
value | string | 当前选中的值 |
valueKey | string ('value') |
tree 数据结构 value 属性名称 |
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,用于多选 。