级联选择 Cascader

级联选择框，用于多级联动选择。

何时使用

• 需要从一组相关联的数据集合进行选择，例如省市区、公司部门等
• 支持多级联动选择
• 支持异步加载数据

代码演示

基本用法

最简单的用法，展示省市区三级联动选择。

禁用状态

通过 disabled 属性设置是否禁用。

加载状态

通过 loading 属性设置加载状态。

选择即改变

通过 changeOnSelect 属性设置在选择过程中就触发 onChange，而不是只在选择叶子节点时触发。

自定义分隔符

通过 separator 属性自定义分隔符。

API

Cascader

参数	说明	类型	默认值
value	当前选中的值路径（受控）	(string | number)[]	-
defaultValue	默认选中的值路径（非受控）	(string | number)[]	[]
options	选项列表	CascaderOption[]	[]
placeholder	占位文本	string	'Placeholder goes here'
disabled	是否禁用	boolean	false
loading	是否加载中	boolean	false
inflow	是否使用 inflow 模式（撑开容器）	boolean	false
onChange	选中值改变时的回调	(value: (string | number)[], selectedOptions: CascaderOption[]) => void	-
onOpenChange	下拉框展开/收起回调	(open: boolean) => void	-
separator	值分隔符，用于显示	string	' / '
changeOnSelect	是否在选择过程中触发 onChange（而非只在选择叶子节点时）	boolean	false

CascaderOption

参数	说明	类型	默认值
label	选项标签	ReactNode	-
value	选项值	string | number	-
disabled	是否禁用	boolean	false
children	子选项	CascaderOption[]	-