MultiCascader 级联多项选择器
对有层级关系结构的数据进行多项选择。
role
属性为
combobox
。
aria-haspopup="tree"
属性来指示 combobox 有一个弹出的树形列表框。
aria-expanded
属性来指示树形列表框是否打开。
aria-controls
属性来指示树形列表框元素的 ID。
aria-activedescendant
属性来指示焦点树节点的 ID。
label
,
aria-labelledby
属性被添加到 combobox 元素和 tree 元素上,并将值设置为
label
的
id
属性值。
aria-multiselectable=true
属性来指示树形列表框是多选的。
<MultiCascader>
类型
(默认值)
appearance
'default' | 'subtle'
('default')
设置选择器的外观样式。
block
boolean
块级显示,占满整个行。
caretAs
ElementType
自定义下拉箭头的组件。
cascade
boolean
(true)
确定选择是否应该在父节点与子节点之间双向级联。
childrenKey
string
('children')
定义数据中用于访问子节点的键名。
classPrefix
string
('picker')
设置组件的 CSS 类前缀。
cleanable
boolean
(true)
是否允许清除已选择的值。
container
HTMLElement | (() => HTMLElement)
设置渲染容器。
countable
boolean
(true)
启用已选项的计数显示。
data *
ItemDataType
[]
定义组件使用的数据结构。
defaultOpen
boolean
是否默认打开组件。
defaultValue
string[]
指定默认选中的值。
disabled
boolean
禁用组件。
disabledItemValues
string
定义应禁用的选项值。
height
number
(320)
指定下拉菜单的高度。
inline
boolean
初始化时直接显示菜单。
[已弃用]
请改用
<MultiCascadeTree>
组件。
labelKey
string
('label')
定义数据中用于访问标签的键名。
loading
boolean
(false)
是否显示加载状态指示器。
locale
PickerLocaleType
设置本地化文本。
[已弃用]
请改用
popupClassName
。
[已弃用]
请改用
columnHeight
。
[已弃用]
请改用
popupStyle
。
[已弃用]
请改用
columnWidth
。
onChange
(value: string[], event) => void
当选择的值发生变化时触发的回调函数。
onCheck
(value: string, item:
ItemDataType
, checked: boolean, event) => void
当复选框状态变化时触发的回调函数。
onClean
(event) => void
当清除值时触发的回调函数。
onClose
() => void
当组件关闭时触发的回调函数。
onEnter
() => void
在浮层过渡开始前触发的回调函数。
onEntered
() => void
在浮层完成过渡后触发的回调函数。
onEntering
() => void
在浮层开始过渡时触发的回调函数。
onExit
() => void
在浮层过渡结束前触发的回调函数。
onExited
() => void
在浮层完成过渡后触发的回调函数。
onExiting
() => void
在浮层开始过渡结束时触发的回调函数。
onOpen
() => void
当组件打开时触发的回调函数。
onSearch
(searchKeyword: string, event) => void
搜索时触发的回调函数。
onSelect
(item:
ItemDataType
, selectedPaths:
ItemDataType
[], event) => void
当选中某个选项时触发的回调函数。
boolean
是否打开组件。
placeholder
ReactNode
('Select')
设置占位符文本。
placement
Placement
('bottomStart')
设置组件的弹出位置。
popupClassName
string
自定义弹出框的类名。
popupStyle
CSSProperties
自定义弹出框的样式。
preventOverflow
boolean
防止浮动元素溢出。
[已弃用]
请改用
renderColumn
。
renderColumn
(childNodes: ReactNode, column: { items, parentItem, layer}) => ReactNode
自定义每一列的渲染方式。
renderExtraFooter
() => ReactNode
自定义额外页脚的渲染方式。
renderTreeNode
(node: ReactNode, item:
ItemDataType
) => ReactNode
自定义树节点的渲染方式。
renderValue
(value: string, selectedItems:
ItemDataType
[], selectedElement: ReactNode) => ReactNode
自定义已选项的渲染方式。
searchable
boolean
(true)
是否启用搜索功能。
'lg' | 'md' | 'sm' | 'xs'
('md')
设置选择器的大小。
toggleAs
ElementType
('a')
使用自定义元素作为组件。
uncheckableItemValues
string
设置无法勾选的选项值。
value
string[]
指定已选项的值(受控)。
valueKey
string
('value')
定义数据中用于访问值的键名。
interface ItemDataType<V> {
/** The value of the option corresponds to the `valueKey` in the data. **/
value: V;
/** The content displayed by the option corresponds to the `labelKey` in the data. **/
label: ReactNode;
* The data of the child option corresponds to the `childrenKey` in the data.
* Properties owned by tree structure components, such as TreePicker, Cascader.
children?: ItemDataType<V>[];
* Properties of grouping functional components, such as CheckPicker, InputPicker
groupBy?: string;
* The children under the current node are loading.
* Used for components that have cascading relationships and lazy loading of children. E.g. Cascader, MultiCascader
loading?: boolean;