> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# CascadeSelectField 级联选择

> CascadeSelectField 级联选择组件文档，介绍级联数据源与层级配置，以弹层形式完成多级联动选择，常用于地区等场景。

## 何时使用

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

## 组件示例

<iframe src="https://www.aliwork.com/developer/cascade-select-field-v2?isRenderNav=false" width="100%" height="480" frameBorder="0" />

## 组件属性

| 属性                  | 说明                                                              | 类型                                                                            | 默认值                                                                                                                                                                                                                                                                                                                         |
| ------------------- | --------------------------------------------------------------- | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `behavior`          | 表单组件显示状态                                                        | [Behavior](/zh/open/yida/components/interface#behavior)                       | `'NORMAL'`                                                                                                                                                                                                                                                                                                                  |
| `columnsNum`        | 级联层级                                                            | `number`                                                                      | `0`                                                                                                                                                                                                                                                                                                                         |
| `dataSource`        | 数据源                                                             | [CascadeDataSource\[\]](/zh/open/yida/components/interface#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](/zh/open/yida/components/interface#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](/zh/open/yida/components/interface#size)                               | `'medium'`                                                                                                                                                                                                                                                                                                                  |
| `tips`              | 表单组件描述信息，展示在控件下方                                                | `string`                                                                      | -                                                                                                                                                                                                                                                                                                                           |
| `validation`        | 表单组件校验设置，具体使用详见[表单校验文档](/zh/open/yida/guide/concept/validation) | [Validation\[\]](/zh/open/yida/components/interface#validation)               | `[]`                                                                                                                                                                                                                                                                                                                        |
| `value`             | 数据源中最后一个节点的 value                                               | `string`                                                                      | `'part_b'`                                                                                                                                                                                                                                                                                                                  |
| `wrapperColOffset`  | 设置表单组件的偏移位置，设置值为栅格值，1代表1/24                                     | `number`                                                                      | `0`                                                                                                                                                                                                                                                                                                                         |
| `wrapperColSpan`    | 设置表单组件的占位宽度，设置值为栅格值，1代表1/24                                     | `number`                                                                      | `0`                                                                                                                                                                                                                                                                                                                         |