MultiCascader 级联多项选择器

对有层级关系结构的数据进行多项选择。

获取组件

MainIndividual
import { MultiCascader } from 'rsuite';

演示

默认

外观

尺寸

级联

默认值

受控

撑满

位置

自定义选项

禁用与只读

不可选状态

异步

容器与防止溢出

可访问性

ARIA 属性

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

键盘交互

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

Props

<MultiCascader>

属性 类型(默认值) 描述
appearance 'default' | 'subtle' ('default') 设置选择器的外观样式。
block boolean 块级显示，占满整个行。
caretAs ElementType 自定义下拉箭头的组件。
cascade boolean (true) 确定选择是否应该在父节点与子节点之间双向级联。
childrenKey string ('children') 定义数据中用于访问子节点的键名。
classPrefix string ('picker') 设置组件的 CSS 类前缀。
cleanable boolean (true) 是否允许清除已选择的值。
container HTMLElement | (() => HTMLElement) 设置渲染容器。
countable boolean (true) 启用已选项的计数显示。
data * ItemDataType[] 定义组件使用的数据结构。
defaultOpen boolean 是否默认打开组件。
defaultValue string[] 指定默认选中的值。
disabled boolean 禁用组件。
disabledItemValues string 定义应禁用的选项值。
height number (320) 指定下拉菜单的高度。
inline boolean 初始化时直接显示菜单。
inline boolean ⚠️[已弃用] 请改用 <MultiCascadeTree> 组件。
labelKey string ('label') 定义数据中用于访问标签的键名。
loading boolean (false) 是否显示加载状态指示器。
locale PickerLocaleType 设置本地化文本。
menuClassName string ⚠️[已弃用] 请改用 popupClassName。
menuHeight number ⚠️[已弃用] 请改用 columnHeight。
menuStyle CSSProperties ⚠️[已弃用] 请改用 popupStyle。
menuWidth number ⚠️[已弃用] 请改用 columnWidth。
onChange (value: string[], event) => void 当选择的值发生变化时触发的回调函数。
onCheck (value: string, item: ItemDataType, checked: boolean, event) => void 当复选框状态变化时触发的回调函数。
onClean (event) => void 当清除值时触发的回调函数。
onClose () => void 当组件关闭时触发的回调函数。
onEnter () => void 在浮层过渡开始前触发的回调函数。
onEntered () => void 在浮层完成过渡后触发的回调函数。
onEntering () => void 在浮层开始过渡时触发的回调函数。
onExit () => void 在浮层过渡结束前触发的回调函数。
onExited () => void 在浮层完成过渡后触发的回调函数。
onExiting () => void 在浮层开始过渡结束时触发的回调函数。
onOpen () => void 当组件打开时触发的回调函数。
onSearch (searchKeyword: string, event) => void 搜索时触发的回调函数。
onSelect (item: ItemDataType, selectedPaths: ItemDataType[], event) => void 当选中某个选项时触发的回调函数。
open boolean 是否打开组件。
placeholder ReactNode ('Select') 设置占位符文本。
placement Placement('bottomStart') 设置组件的弹出位置。
popupClassName string 自定义弹出框的类名。
popupStyle CSSProperties 自定义弹出框的样式。
preventOverflow boolean 防止浮动元素溢出。
renderMenu (node: ReactNode, column: { items, parentItem, layer}) => ReactNode ⚠️[已弃用] 请改用 renderColumn。
renderColumn (childNodes: ReactNode, column: { items, parentItem, layer}) => ReactNode 自定义每一列的渲染方式。
renderExtraFooter () => ReactNode 自定义额外页脚的渲染方式。
renderTreeNode (node: ReactNode, item: ItemDataType) => ReactNode 自定义树节点的渲染方式。
renderValue (value: string, selectedItems: ItemDataType[], selectedElement: ReactNode) => ReactNode 自定义已选项的渲染方式。
searchable boolean (true) 是否启用搜索功能。
size 'lg' | 'md' | 'sm' | 'xs' ('md') 设置选择器的大小。
toggleAs ElementType ('a') 使用自定义元素作为组件。
uncheckableItemValues string 设置无法勾选的选项值。
value string[] 指定已选项的值（受控）。
valueKey string ('value') 定义数据中用于访问值的键名。

ItemDataType 

interface ItemDataType<V> {
  /** The value of the option corresponds to the `valueKey` in the data. **/
  value: V;

  /** 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<V>[];

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

Placement 

type Placement = 'bottomStart' | 'topStart' | 'autoVerticalStart';
Vercel banner