MultiCascader 级联多项选择器 #

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

获取组件 #

演示 #

默认 #

外观 #

尺寸 #

级联 #

默认值 #

受控 #

撑满 #

位置 #

自定义选项 #

禁用与只读 #

不可选状态 #

异步 #

容器与防止溢出 #

可访问性 #

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 #

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

<MultiCascader> #

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

ts:Placement #

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