CheckTree 树形多选控件

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

获取组件 

import { CheckTree } from 'rsuite';

// or
import CheckTree from 'rsuite/CheckTree';

演示

默认

级联选择

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

显示缩进线

自定义选项

异步加载

Props

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

<CheckTree>

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

相关组件

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