CascadeSelectField 级联选择 - DingTalk Help Center

何时使用

级联选择由选择器和级联组成。把级联组件以弹层的方式隐藏，多用于表单场景。

组件示例

组件属性

属性	说明	类型	默认值
`behavior`	表单组件显示状态	Behavior	`'NORMAL'`
`columnsNum`	级联层级	`number`	`0`
`dataSource`	数据源	CascadeDataSource[]	`[{ "value": "part", "label": { "type": "i18n", "en_US": "dep", "zh_CN": "部门" }, "children": [{ "value": "part_a", "label": "A部门" }, { "value": "part_b", "label": "B部门" } ] }, { "value": "product", "label": "产品", "children": [{ "value": "product_a", "label": "a产品" }, { "value": "product_b", "label": "b产品" } ] } ]`
`expandTriggerType`	触发行为	`'click' \| 'hover'`	`click`
`hasArrow`	是否显示下拉箭头	`boolean`	`true`
`hasBorder`	是否显示边框	`boolean`	`true`
`hasClear`	是否显示清除按钮	`boolean`	`true`
`isLoadData`	是否开启异步加载	`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`	列表样式	`React.CSSProperties`	`{}`
`loadData`	loadData 函数	`( node: object ) => Promise<CascadeDataSource[]>`	-
`notFoundContent`	无数据时显示内容	`string`	`'无数据'`
`onChange`	onChange 值发生变化	`({ value: string \| array, data: object \| array , extra: object }) => void`	-
`onVisibleChange`	onVisibleChange 弹层显示隐藏变化	`( visible : boolean ) => void`	-
`optionAutoWidth`	是否开启选项自动宽度，仅支持PC端	`boolean`	`false`
`placeholder`	占位提示	`string`	`'请选择'`
`showSearch`	是否显示搜索框	`boolean`	`false`
`size`	表单组件尺寸	Size	`'medium'`
`tips`	表单组件描述信息，展示在控件下方	`string`	-
`validation`	表单组件校验设置，具体使用详见表单校验文档	Validation[]	`[]`
`value`	数据源中最后一个节点的 value	`string`	`'part_b'`
`wrapperColOffset`	设置表单组件的偏移位置，设置值为栅格值，1代表1/24	`number`	`0`
`wrapperColSpan`	设置表单组件的占位宽度，设置值为栅格值，1代表1/24	`number`	`0`