CheckTreePicker 树形多项选择器

多项选择器中支持树形结构，用于复杂的数据结构进行多选。

获取组件 

import { CheckTreePicker } from 'rsuite';

// or
import CheckTreePicker from 'rsuite/CheckTreePicker';

演示

默认

外观

尺寸

级联选择

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

位置

禁用与只读

自定义选项

异步

无障碍设计

了解更多有关无障碍设计的信息。

Props

<CheckTreePicker>

属性名称 类型 (默认值) 描述
appearance 'default' | 'subtle' ('default') 设置外观
block boolean 堵塞整行
cascade boolean checktree 是否级联选择
childrenKey string ('children') tree 数据结构 children 属性名称
cleanable boolean (true) 是否可以清除
container HTMLElement | (() => HTMLElement) 设置渲染的容器
countable boolean (true) 是否显示已选项的计数
data * ItemDataType[] tree 数据
defaultExpandAll boolean 默认展开所有节点
defaultExpandItemValues string [] 设置默认展开节点的值
defaultValue string[] 默认选中的值
disabled boolean 是否禁用 Picker
disabledItemValues string[] 禁用选项
expandItemValues string [] 设置展开节点的值（受控）
getChildren (item: ItemDataType) => Promise<ItemDataType> 异步加载节点数据
height number (360px) menu 的高度。当设置了 virtualized 为 true 时， 可以通过 height 控制 menu 的高度
labelKey string ('label') tree 数据结构 label 属性名称
listProps ListProps react-virtualized 中 List 的相关属性
locale PickerLocaleType 本地化的文本
menuClassName string 选项菜单的 className
menuStyle CSSProperties 应用于菜单 DOM 节点的 style
onChange (values:string[]) => void 数据改变的回调函数
onClean (event) => void 值清理时触发回调
onClose () => void 关闭的回调函数
onEnter () => void 显示前动画过渡的回调函数
onEntered () => void 显示后动画过渡的回调函数
onEntering () => void 显示中动画过渡的回调函数
onExit () => void 退出前动画过渡的回调函数
onExited () => void 退出后动画过渡的回调函数
onExiting () => void 退出中动画过渡的回调函数
onExpand (expandItemValues: string[], item: ItemDataType, concat:(data, children) => Array) => void 树节点展示时的回调
onOpen () => void 展开的回调函数
onSearch (searchKeyword:string, event)=void 搜索回调函数
onSelect (item:ItemDataType,value:string, event) => void 选择树节点后的回调函数
open boolean 是否打开
placeholder ReactNode ('Select') 占位符
placement Placement ('bottomStart') 打开位置
preventOverflow boolean 防止浮动元素溢出
renderExtraFooter () => ReactNode 自定义页脚内容
renderMenu (menu: ReactNode) => ReactNode 自定义渲染菜单
renderTreeIcon (item:ItemDataType) => ReactNode 自定义渲染 图标
renderTreeNode (item:ItemDataType) => ReactNode 自定义渲染 tree 节点
renderValue (values:string[], checkedItems:ItemDataType[],selectedElement: ReactNode) => ReactNode 自定义渲染 placeholder
searchBy (keyword: string, label: ReactNode, item: ItemDataType) => boolean 自定义搜索规则
searchable boolean (true) 是否显示搜索框
size 'lg' | 'md' | 'sm' | 'xs' ('md') 设置组件尺寸
toggleAs ElementType ('a') 为组件自定义元素类型
uncheckableItemValues string[] 设置不显示复选框的选项值
value string[] 当前选中的值
valueKey string ('value') tree 数据结构 value 属性名称
virtualized boolean 是否开启虚拟列表
caretAs ElementType 自定义右侧箭头图标的组件

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:Placement 

type Placement =
  | 'bottomStart'
  | 'bottomEnd'
  | 'topStart'
  | 'topEnd'
  | 'leftStart'
  | 'leftEnd'
  | 'rightStart'
  | 'rightEnd'
  | 'auto'
  | 'autoVerticalStart'
  | 'autoVerticalEnd'
  | 'autoHorizontalStart'
  | 'autoHorizontalEnd';

相关组件

  • <CheckTree> 用于展示一个树结构数据，同时支持 Checkbox 选择。
  • <Tree> 用于展示一个树结构数据。
  • <TreePicker> 选择器组件，树形单项选择器。