CheckTree 树形多选控件
<CheckTree> 用于展示一个树结构数据,同时支持 Checkbox 选择。
获取组件
import { CheckTree } from 'rsuite';
// or
import CheckTree from 'rsuite/CheckTree';演示
默认
级联选择
cascade 属性可以设置 CheckTree 在选择的时候是否可考虑子父级的级联关系,默认为 true。
显示缩进线
自定义选项
异步加载
Props
interface DataItemType {
  /** 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?: DataItemType[];
  /**
   * 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 * | Array<DataItemType> | tree 数据 | 
| defaultExpandAll | boolean | 默认展开所有节点 | 
| defaultExpandItemValues | any [] | 设置默认展开节点的值 | 
| defaultValue | string[] | 默认选中的值 | 
| disabledItemValues | string[] | 禁用节点列表 | 
| expandItemValues | any [] | 设置展开节点的值(受控) | 
| getChildren | (node: DataItemType) => Promise<DataItemType> | 异步加载节点数据 | 
| height | number (360px) | menu 的高度。当设置了 virtualized 为 true 时, 可以通过 height 控制 menu 的高度 | 
| labelKey | string ('label') | tree 数据结构 label 属性名称 | 
| listProps | ListProps | react-virtualized中 List 的相关属性 | 
| onChange | (values:string[]) => void | 数据改变的回调函数 | 
| onExpand | (expandItemValues: any [], activeNode:DataItemType, concat:(data, children) => Array) => void | 树节点展示时的回调 | 
| onSelect | (activeNode:DataItemType,value:any, event) => void | 选择树节点后的回调函数 | 
| renderTreeIcon | (nodeData:DataItemType) => ReactNode | 自定义渲染 图标 | 
| renderTreeNode | (nodeData:DataItemType) => ReactNode | 自定义渲染 tree 节点 | 
| searchKeyword | string | 搜索关键词(受控) | 
| uncheckableItemValues | string[] | 设置不显示复选框的选项值 | 
| value | string[] | 当前选中的值 | 
| valueKey | string ('value') | tree 数据结构 value 属性名称 | 
| virtualized | boolean | 是否开启虚拟列表 | 
相关组件
- <Tree>用于展示一个树结构数据。
- <TreePicker>选择器组件,树形单项选择器。
- <CheckTreePicker>选择器组件,在 TreePicker 节点上支持 Checkbox,用于多选 。