{"meta":"

Guide #

\n

When To Use #

\n\n","api":"

API #

\n

Cascader #

\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
dataSourceData sourceArray<CascaderDataItem>[]-
defaultValueDefault valuestring | Array<string>--
valueCurrent valuestring | Array<string>--
onChangeCallback when value changed

signature:
params:
value: Selected value, single value when single select, array when multiple select
data: Selected data, including value and label, single value when single select, array when multiple select
extra: Extra parameters		(
value: string | Array<string>,
data: CascaderDataItem | Array<CascaderDataItem>,
extra: Extra
) => void		--
onSelectCallback when selected

signature:
params:
v: Selected value
data: Selected data, including value and label
extra: Extra parameters		(v: string, data: CascaderDataItemWithPosInfo, extra: Extra) => void--
defaultExpandedValueDefault expanded valueArray<string>--
expandedValueCurrent expanded valueArray<string>--
expandTriggerTypeExpand trigger type'click' | 'hover''click'-
onExpandCallback when expanded

signature:
params:
expandedValue: Expanded value		(expandedValue: Array<string>) => void--
useVirtualUse virtual scroll, recommend set listStyle fixed width when enablebooleanfalse-
multipleMultiplebooleanfalse-
canOnlySelectLeafCan only select leaf when single selectbooleanfalse-
canOnlyCheckLeafCan only check leaf when multiple selectbooleanfalse-
checkStrictlyCheck parent and child not associatedbooleanfalse-
listStyleList styleReact.CSSProperties--
listClassNameList classstring--
itemRenderList item render

signature:
params:
data: Data
props: List item props
return:
List item content		(data: CascaderDataItem, props: ItemProps) => React.ReactNode(item: CascaderDataItem) => item.label-
loadDataAsync load data function

signature:
params:
data: Current click data
source: Current click data, source is original object		(data: CascaderDataItem, source: CascaderDataItem) => Promise<unknown>--
immutableImmutablebooleanfalse1.23.0
\n

CascaderDataItem #

\n
export type CascaderDataItem = {\n    value: string;\n    label?: React.ReactNode;\n    disabled?: boolean;\n    checkboxDisabled?: boolean;\n    children?: Array<CascaderDataItem>;\n    title?: string;\n    [propName: string]: unknown;\n};\n
\n

CascaderDataItemWithPosInfo #

\n
export type CascaderDataItemWithPosInfo = CascaderDataItem & {\n    /**\n     * 位置信息\n     */\n    pos: string;\n    _source?: CascaderDataItem;\n};\n
\n

Extra #

\n
export type Extra = {\n    /**\n     * 单选时选中的数据的路径\n     */\n    selectedPath?: Array<CascaderDataItem>;\n    /**\n     * 多选时当前的操作是选中还是取消选中\n     */\n    checked?: boolean;\n    /**\n     * 多选时当前操作的数据\n     */\n    currentData?: CascaderDataItem;\n    /**\n     * 多选时所有被选中的数据\n     */\n    checkedData?: Array<CascaderDataItem>;\n    /**\n     * 多选时半选的数据\n     */\n    indeterminateData?: Array<CascaderDataItem>;\n};\n
\n\n

Data structure of dataSource #

\n
const dataSource = [\n    {\n        value: '2974',\n        label: 'A',\n        children: [\n            { value: '2975', label: 'B', disabled: true },\n            { value: '2976', label: 'C', checkboxDisabled: true },\n            { value: '2977', label: 'D' },\n            { value: '2978', label: 'E' },\n            { value: '2979', label: 'F' },\n            { value: '4208', label: 'G' },\n            { value: '4209', label: 'H' },\n            { value: '4210', label: 'I' },\n            { value: '4211', label: 'J' },\n            { value: '4212', label: 'K' },\n            { value: '4213', label: 'L' },\n            { value: '4214', label: 'M' },\n            { value: '4215', label: 'N' },\n            { value: '4388', label: 'O' },\n            { value: '610127', label: 'P' },\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
按键说明
Left ArrowGet the previous item focus of the current item of same level
Right ArrowGet the next item focus of the current item of same level
TabEnter the child element of the current item and get the first child element as the focus
EscReturns the parent of the current item and gets the focus
SPACESelect current item
\n"}