CheckTree 树形多选控件

<CheckTree> 用于展示一个树结构数据，同时支持 Checkbox 选择。

获取组件

MainIndividual
import { CheckTree } from 'rsuite';

演示

默认

级联选择

cascade 属性可以设置 CheckTree 在选择的时候是否可考虑子父级的级联关系，默认为 true。

显示缩进线

自定义选项

虚拟化

异步载入子节点

可搜索

Props

<CheckTree>

属性名称 类型 (默认值) 描述
cascade boolean (true) 是否级联选择
childKey string ('children') 数据 children 属性名称
data * TreeNode[] 树数据
defaultExpandAll boolean 默认展开所有节点
defaultExpandItemValues any [] 设置默认展开节点的值
defaultValue string[] 默认选中的值
disabledItemValues string[] 禁用节点列表
expandItemValues any [] 设置展开节点的值（受控）
getChildren (item: TreeNode) => Promise<TreeNode> 异步加载节点数据
height number (360px) menu 的高度。当设置了 virtualized 为 true 时， 可以通过 height 控制 menu 的高度
labelKey string ('label') tree 数据结构 label 属性名称
listProps ListProps 虚拟化长列表的相关属性
onChange (values:string[]) => void 数据改变的回调函数
onExpand (expandItemValues: any [], item: TreeNode, concat:(data, children) => Array) => void 树节点展示时的回调
onSearch (keyword: string) => void 搜索回调函数
onSelect (item: TreeNode,value:any, event) => void 选择树节点后的回调函数
renderTreeIcon (item:TreeNode) => ReactNode 自定义渲染 图标
renderTreeNode (item: TreeNode) => ReactNode 自定义渲染 tree 节点
searchable boolean 是否显示搜索框
searchKeyword string 搜索关键词(受控)
uncheckableItemValues string[] 设置不显示复选框的选项值
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;
}

相关组件

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