{"meta":"

Guide #

\n

When To Use #

\n

CascaderSelect consists of Select and Cascader. Cascader are hidden in a pop up layer by default and are mostly used in form scenes.

\n","api":"

API #

\n

CascaderSelect #

\n

Inherits partial props from Cascader, support passing props to Cascader: dataSource, useVirtual, multiple, canOnlyCheckLeaf,\ncheckStrictly, resultRender, expandedValue, defaultExpandedValue, expandTriggerType, onExpand, listStyle, listClassName, loadData, i\ntemRender, immutable. Support passing props to Select: other Select props except those listed above and those listed below.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault ValueRequiredSupported Version
sizeSize'small' | 'medium' | 'large''medium'-
disabledDisabledbooleanfalse-
hasArrowHasArrowbooleantrue-
hasBorderHasBorderbooleantrue-
hasClearHasClearbooleanfalse-
readOnlyReadOnly, popup layer can be expanded but cannot be selected in readboolean--
defaultValueDefault value(not controlled)string | Array<string>--
valueCurrent value(controlled)string | Array<string>--
onChangeCallback when selected value changes(
value: string | Array<string> | null,
data: CascaderDataItem | Array<CascaderDataItem> | null,
extra?: Extra
) => void		--
changeOnSelectWhether to call onChange as soon as selected, this property only works in single selection modebooleanfalse-
displayRenderCustom render function of selected result(
label: Array<React.ReactNode>,
data: CascaderSelectDataItem
) => React.ReactNode		--
showSearchShow search boxbooleanfalse-
filterCustom search function(searchValue: string, path: CascaderSelectDataItem[]) => boolean--
onSearchCallback when search value changes(value: string) => void-1.23
resultAutoWidthWhether the search result list is the same width as the selection boxbooleantrue-
notFoundContentContent when no dataReact.ReactNode--
headerCustom dropdown headerReact.ReactNode--
footerCustom dropdown footerReact.ReactNode--
defaultVisibleVisible by defaultbooleanfalse-
visibleCurrent visibleboolean--
onVisibleChange-(visible: boolean, type?: CascaderSelectVisibleChangeType) => void--
popupPropsProps object passed to PopupReact.ComponentPropsWithRef<typeof Popup>--
isPreviewWhether it is in preview modebooleanfalse-
renderPreviewCustom preview(
value: CascaderSelectDataItem | CascaderSelectDataItem[],
props: CascaderSelectProps
) => React.ReactNode		--
menuPropsProps object passed to Cascader：The parameters focusedKey, onItemFocus, className, style, focusable, and isSelectIconRight are invalid. Additionally, onBlur is invalid when passed under the filterOmit<CascaderProps, 'onSelect' | 'onChange'>--
autoClearSearchValueWhether the current search will be cleared on selecting an item. Only applies when multiple is truebooleanfalse-
\n\n

Data structure of dataSource #

\n
const dataSource = [\n    {\n        value: '2974',\n        label: '西安',\n        children: [\n            { value: '2975', label: '西安市', disabled: true },\n            { value: '2976', label: '高陵县', checkboxDisabled: true },\n            { value: '2977', label: '蓝田县' },\n            { value: '2978', label: '户县' },\n            { value: '2979', label: '周至县' },\n            { value: '4208', label: '灞桥区' },\n            { value: '4209', label: '长安区' },\n            { value: '4210', label: '莲湖区' },\n            { value: '4211', label: '临潼区' },\n            { value: '4212', label: '未央区' },\n            { value: '4213', label: '新城区' },\n            { value: '4214', label: '阎良区' },\n            { value: '4215', label: '雁塔区' },\n            { value: '4388', label: '碑林区' },\n            { value: '610127', label: '其它区' },\n        ],\n    },\n];\n
\n

The custom attribute of item in the array is also transparently passed to the data parameter of the onChange function.

\n\n

ARIA and KeyBoard #

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
Up ArrowGet the previous item focus of the current item of same level
Down ArrowGet the next item focus of the current item of same level
Left ArrowEnter the child element of the current item and get the first child element as the focus
Right ArrowReturns the parent of the current item and gets the focus
EnterOpen the directory or select current item
EscClose the directory
SPACESelect current item
\n"}