CascadeSelectField Cascading Selection

When to Use

• Cascading selection consists of a selector and cascading components. The cascading components are hidden in a popup layer, commonly used in form scenarios.

Component Example

Component Properties

属性	说明	类型	默认值
behavior	表单组件显示状态	Behavior	'NORMAL'
columnsNum	Cascading level	number	0
dataSource	Data source	CascadeDataSource[]	[{ "value": "part", "label": { "type": "i18n", "en_US": "dep", "zh_CN": "Department" }, "children": [{ "value": "part_a", "label": "Department A" }, { "value": "part_b", "label": "Department B" } ] }, { "value": "product", "label": "Product", "children": [{ "value": "product_a", "label": "Product A" }, { "value": "product_b", "label": "Product B" } ] } ]
expandTriggerType	Trigger behavior	'click' | 'hover'	click
hasArrow	Whether to show dropdown arrow	boolean	true
hasBorder	Whether to show border	boolean	true
hasClear	Whether to show clear button	boolean	true
isLoadData	Whether to enable asynchronous loading	boolean	false
label	表单组件标题	string	-
labelAlign	表单组件标题的位置	'left' | 'top'	'top'
labelColOffset	设置标题的偏移位置，配置值为栅格值，1代表1/24	number	0
labelColSpan	设置标题的占位宽度，配置值为栅格值，1代表1/24	number	4
labelTextAlign	表单组件的标题对齐方式	'left' | 'right'	'right'
labelTipsIcon	表单组件标题提示信息入口图标，当labelTipsTypes取值为 text 或 render 时生效	string	-
labelTipsRender	表单组件标题提示信息自定义渲染方法，当labelTipsTypes取值为 render 时生效	(props: IComponentProps) => ReactNode	-
labelTipsText	表单组件标题提示文本信息，当labelTipsTypes取值为 text 时生效	string	-
labelTipsTypes	表单组件标题提示信息类型设置	LabelTipsTypes	'none'
listStyle	List style	React.CSSProperties	{}
loadData	loadData function	( node: object ) => Promise<CascadeDataSource[]>	-
notFoundContent	Content displayed when no data	string	'No Data'
onChange	onChange value changed	({ value: string | array, data: object | array , extra: object }) => void	-
onVisibleChange	onVisibleChange popup layer show/hide change	( visible : boolean ) => void	-
optionAutoWidth	Whether to enable option auto width, only supports PC	boolean	false
placeholder	Placeholder hint	string	'Please Select'
showSearch	Whether to show search box	boolean	false
size	表单组件尺寸	Size	'medium'
tips	表单组件描述信息，展示在控件下方	string	-
validation	表单组件校验设置，具体使用详见表单校验文档	Validation[]	[]
value	Value of the last node in the data source	string	'part_b'
wrapperColOffset	设置表单组件的偏移位置，设置值为栅格值，1代表1/24	number	0
wrapperColSpan	设置表单组件的占位宽度，设置值为栅格值，1代表1/24	number	0