Cascader 级联选择器

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

获取组件

MainIndividual
import { Cascader } from 'rsuite';

演示

默认

外观

尺寸

撑满

位置

提示：设置为auto*时，尝试滚动页面或更改浏览器大小，它将自动出现在正确的位置。

父节点可选

自定义选项

禁用与只读

异步数据

可以通过 getChildren 属性和树节点上的 children 字段 length 为 0 以异步加载子级。

受控的

容器与防止溢出

可访问性

ARIA 属性

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

键盘交互

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

Props

<Cascader>

属性名称 类型(默认值) 描述
appearance 'default' | 'subtle' ('default') 设置外观
block boolean 堵塞整行
caretAs ElementType 自定义右侧箭头图标的组件
childrenKey string ('children') 设置选项子节点在 data 中的 key
classPrefix string ('picker') 组件 CSS 类的前缀
cleanable boolean (true) 可以清除
columnHeight number 设置菜单的高度
columnWidth number 设置菜单的宽度
container HTMLElement | (() => HTMLElement) 设置渲染的容器
data * ItemDataType[] 组件数据
defaultValue string 设置默认值
disabled boolean 禁用组件
disabledItemValues string[] 禁用选项
getChildren (item: ItemDataType) => Promise<ItemDataType[]> 异步加载树节点的子级
height number (320) 设置 Dropdown 的高度
inline boolean ⚠️[已弃用] 使用 <CascadeTree> 组件代替
labelKey string ('label') 设置选项显示内容在 data 中的 key
loading boolean (false) 是否显示一个加载中状态指示器
locale PickerLocaleType 本地化的文本
menuClassName string ⚠️[已弃用] 使用 popupClassName 代替
menuHeight number ⚠️[已弃用] 使用 columnHeight 代替
menuStyle CSSProperties ⚠️[已弃用] 使用 popupStyle 代替
menuWidth number ⚠️[已弃用] 使用 columnWidth 代替
onChange (value:string, event) => void value 发生改变时的回调函数
onClean (event:SyntheticEvent) => 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 是否打开
parentSelectable boolean 设置父节点为可选
placeholder ReactNode ('Select') 占位符
placement Placement ('bottomStart') 打开位置
popupClassName string 设置弹出层的 CSS 类名
popupStyle CSSProperties 设置弹出层的样式
preventOverflow boolean 防止浮动元素溢出
rendeMenu (node: ReactNode, column: { items, parentItem, layer}) => ReactNode ⚠️[已弃用] 使用 renderColumn 代替
renderColumn (childNodes: ReactNode, column: { items, parentItem, layer}) => ReactNode 自定义渲染菜单列表
renderExtraFooter () => ReactNode 自定义页脚内容
renderMenuItem (node: ReactNode, item: ItemDataType) => ReactNode ⚠️[已弃用] 使用 renderTreeNode 代替
renderSearchItem (node: ReactNode, items: ItemDataType[]) => ReactNode 自定义渲染搜索结果选项
renderTreeNode (node: ReactNode, item: ItemDataType) => ReactNode 自定义选项
renderValue (value:string, selectedPaths: ItemDataType[], selectedElement:ReactNode) => ReactNode 自定义被选中的选项
searchable boolean (true) 可以搜索
size 'lg' | 'md' | 'sm' | 'xs' ('md') 设置组件尺寸
toggleAs ElementType ('a') 为组件自定义元素类型
value string 设置值（受控）
valueKey string ('value') 设置选项值在 data 中的 key

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';
Vercel banner