CheckTreePicker 树形多项选择器

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

获取组件

import { CheckTreePicker } from 'rsuite';

演示

默认

外观

尺寸

级联选择

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

位置

禁用与只读

自定义选项

异步

自定义页脚

可访问性

ARIA 属性

  • CheckTreePicker 组件的 role 属性为 combobox
  • aria-haspopup="tree" 属性来指示 combobox 有一个弹出的树形列表框。
  • aria-expanded 属性来指示树形列表框是否打开。
  • aria-controls 属性来指示树形列表框元素的 ID。
  • aria-activedescendant 属性来指示焦点选项的 ID。
  • 当设置了 label, aria-labelledby 属性被添加到 combobox 元素和 tree 元素上,并将值设置为 labelid 属性值。
  • tree 有 aria-multiselectable=true 属性来指示树形列表框是多选的。

键盘交互

  • - 移动焦点到下一个树节点。
  • - 移动焦点到上一个树节点。
  • - 展开当前树节点。
  • - 收起当前树节点。
  • Enter - 选择聚焦的树节点。
  • Esc - 关闭树形列表框。

Props

<CheckTreePicker>

属性名称 类型 (默认值) 描述
appearance 'default' | 'subtle' ('default') 设置外观
block boolean 堵塞整行
caretAs ElementType 自定义右侧箭头图标的组件
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 虚拟化长列表的相关属性
loading boolean (false) 是否显示一个加载中状态指示器
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
searchable boolean (true) 是否显示搜索框
searchBy (keyword: string, label: ReactNode, item: ItemDataType) => boolean 自定义搜索规则
size 'lg' | 'md' | 'sm' | 'xs' ('md') 设置组件尺寸
toggleAs ElementType ('a') 为组件自定义元素类型
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:Placement

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

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

相关组件

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