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": "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`	展開のトリガー動作	`'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`	`'No data'`
`onChange`	値が変更されたときにトリガー	`({ value: string \| array, data: object \| array , extra: object }) => void`	-
`onVisibleChange`	ポップアップレイヤーの表示状態が変更されたときにトリガー	`( visible : boolean ) => void`	-
`optionAutoWidth`	オプションの自動幅を有効にするかどうか。PC のみサポート	`boolean`	`false`
`placeholder`	プレースホルダーのお知らせテキスト	`string`	`'Please select'`
`showSearch`	検索ボックスを表示するかどうか	`boolean`	`false`
`size`	フォームコンポーネントのサイズ	Size	`'medium'`
`tips`	フォームコンポーネントの説明。コントロールの下に表示されます	`string`	-
`validation`	フォームコンポーネントのバリデーション設定。詳細はフォームバリデーションのドキュメントを参照してください	Validation[]	`[]`
`value`	データソース内の最後のノードの値	`string`	`'part_b'`
`wrapperColOffset`	フォームコンポーネントのオフセット位置を設定します。値はグリッド単位で、1 は 1/24 を表します	`number`	`0`
`wrapperColSpan`	フォームコンポーネントの占有幅を設定します。値はグリッド単位で、1 は 1/24 を表します	`number`	`0`