CascadeSelectField Cascade Select - DingTalk Help Center

Kapan digunakan

Cascade Select terdiri atas selektor dan panel bertingkat. Komponen bertingkat disembunyikan sebagai lapisan popup dan umumnya digunakan pada skenario Formulir.

Contoh komponen

Properti komponen

Atribut	Deskripsi	Tipe	Default
`behavior`	Status tampilan komponen formulir	Behavior	`'NORMAL'`
`columnsNum`	Tier bertingkat	`number`	`0`
`dataSource`	Sumber Data	CascadeDataSource[]	`[{ "value": "part", "label": { "type": "i18n", "en_US": "dep", "zh_CN": "部门" }, "children": [{ "value": "part_a", "label": "Departemen A" }, { "value": "part_b", "label": "Departemen B" } ] }, { "value": "product", "label": "Produk", "children": [{ "value": "product_a", "label": "Produk A" }, { "value": "product_b", "label": "Produk B" } ] } ]`
`expandTriggerType`	Perilaku pemicu	`'click' \| 'hover'`	`click`
`hasArrow`	Menampilkan panah dropdown atau tidak	`boolean`	`true`
`hasBorder`	Menampilkan border atau tidak	`boolean`	`true`
`hasClear`	Menampilkan tombol hapus atau tidak	`boolean`	`true`
`isLoadData`	Mengaktifkan pemuatan asinkron atau tidak	`boolean`	`false`
`label`	Judul komponen formulir	`string`	-
`labelAlign`	Lokasi Judul komponen formulir	`'left' \| 'top'`	`'top'`
`labelColOffset`	Atur posisi offset Judul. Nilai berupa unit kisi, dengan 1 mewakili 1/24	`number`	`0`
`labelColSpan`	Atur lebar placeholder Judul. Nilai berupa unit kisi, dengan 1 mewakili 1/24	`number`	`4`
`labelTextAlign`	Perataan Judul komponen formulir	`'left' \| 'right'`	`'right'`
`labelTipsIcon`	Ikon entri untuk Tips Judul komponen formulir. Berlaku ketika labelTipsTypes diatur ke text atau render	`string`	-
`labelTipsRender`	Metode render kustom untuk Tips Judul komponen formulir. Berlaku ketika labelTipsTypes diatur ke render	`(props: IComponentProps) => ReactNode`	-
`labelTipsText`	Teks Tips untuk Judul komponen formulir. Berlaku ketika labelTipsTypes diatur ke text	`string`	-
`labelTipsTypes`	Pengaturan tipe Tips untuk Judul komponen formulir	LabelTipsTypes	`'none'`
`listStyle`	Gaya daftar	`React.CSSProperties`	`{}`
`loadData`	Fungsi loadData	`( node: object ) => Promise<CascadeDataSource[]>`	-
`notFoundContent`	Konten yang ditampilkan ketika tidak ada Data	`string`	`'No data'`
`onChange`	Dipicu ketika nilai berubah	`({ value: string \| array, data: object \| array , extra: object }) => void`	-
`onVisibleChange`	Dipicu ketika visibilitas lapisan popup berubah	`( visible : boolean ) => void`	-
`optionAutoWidth`	Mengaktifkan lebar otomatis untuk opsi atau tidak. Hanya didukung di PC	`boolean`	`false`
`placeholder`	Tips placeholder	`string`	`'Please select'`
`showSearch`	Menampilkan kotak Cari atau tidak	`boolean`	`false`
`size`	Ukuran komponen formulir	Size	`'medium'`
`tips`	Deskripsi komponen formulir, ditampilkan di bawah kontrol	`string`	-
`validation`	Pengaturan validasi untuk komponen formulir. Untuk detail, lihat dokumentasi validasi formulir	Validation[]	`[]`
`value`	Nilai node terakhir pada Sumber Data	`string`	`'part_b'`
`wrapperColOffset`	Atur posisi offset komponen formulir. Nilai berupa unit kisi, dengan 1 mewakili 1/24	`number`	`0`
`wrapperColSpan`	Atur lebar placeholder komponen formulir. Nilai berupa unit kisi, dengan 1 mewakili 1/24	`number`	`0`