CascadeSelectField Cascade Select - DingTalk Help Center

When to Use

Cascade Select consists of a selector and a cascade panel. The cascade Component is hidden as a popup layer and is typically used in Form scenarios.

Component Example

Component Properties

Attribute	Description	Type	Default
`behavior`	Display state of the form Component	Behavior	`'NORMAL'`
`columnsNum`	Cascade Tier	`number`	`0`
`dataSource`	Data Source	CascadeDataSource[]	`[{ "value": "part", "label": { "type": "i18n", "en_US": "dep", "zh_CN": "部门" }, "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 display the dropdown arrow	`boolean`	`true`
`hasBorder`	Whether to display the border	`boolean`	`true`
`hasClear`	Whether to display the clear Button	`boolean`	`true`
`isLoadData`	Whether to enable asynchronous loading	`boolean`	`false`
`label`	Title of the form Component	`string`	-
`labelAlign`	Location of the form Component Title	`'left' \| 'top'`	`'top'`
`labelColOffset`	Sets the offset position of the Title. The value is in grid units, where 1 represents 1/24	`number`	`0`
`labelColSpan`	Sets the placeholder width of the Title. The value is in grid units, where 1 represents 1/24	`number`	`4`
`labelTextAlign`	Alignment of the form Component Title	`'left' \| 'right'`	`'right'`
`labelTipsIcon`	Entry icon for the form Component Title tip. Takes effect when labelTipsTypes is set to text or render	`string`	-
`labelTipsRender`	Custom render method for the form Component Title tip. Takes effect when labelTipsTypes is set to render	`(props: IComponentProps) => ReactNode`	-
`labelTipsText`	Tips text for the form Component Title. Takes effect when labelTipsTypes is set to text	`string`	-
`labelTipsTypes`	Tips type setting for the form Component Title	LabelTipsTypes	`'none'`
`listStyle`	List style	`React.CSSProperties`	`{}`
`loadData`	loadData Function	`( node: object ) => Promise<CascadeDataSource[]>`	-
`notFoundContent`	Content displayed when no Data is available	`string`	`'No data'`
`onChange`	Triggered when the value changes	`({ value: string \| array, data: object \| array , extra: object }) => void`	-
`onVisibleChange`	Triggered when the popup layer visibility changes	`( visible : boolean ) => void`	-
`optionAutoWidth`	Whether to enable auto width for options. Supported on PC only	`boolean`	`false`
`placeholder`	Placeholder Tips	`string`	`'Please select'`
`showSearch`	Whether to display the Search box	`boolean`	`false`
`size`	Size of the form Component	Size	`'medium'`
`tips`	Description of the form Component, displayed below the control	`string`	-
`validation`	Validation settings for the form Component. For details, see the form validation documentation	Validation[]	`[]`
`value`	Value of the last node in the Data Source	`string`	`'part_b'`
`wrapperColOffset`	Sets the offset position of the form Component. The value is in grid units, where 1 represents 1/24	`number`	`0`
`wrapperColSpan`	Sets the placeholder width of the form Component. The value is in grid units, where 1 represents 1/24	`number`	`0`