Cascader
Props
Prop Name | Type | Required | Default | Description |
---|---|---|---|---|
dataSource | CascadeData[] | 数据源 | ||
value | Key[] | 选中的值 | ||
defaultValue | Key[] | 默认值,非受控 | ||
onChange | (value: Key[] | void) => void | 选中回调 | ||
disabled | boolean | 是否禁用 | ||
size | Size | 尺寸 | ||
search | | boolean | { /** 自定义搜索函数 */ handleSearch?: ( searchValue: string, dataSource: CascadeData[] ) => { dataSource: CascadeData[]; count?: number; }; } | 使用搜索 | ||
loadData | LoadData | 异步加载数据操作 | ||
clearable | boolean | 是否可清空 | ||
status | InputProps['status'] | 状态 | ||
popoverProps | { [key: string]: any } | 自定义 popover 的配置 | ||
separator | string | 分隔符 |
说明
- 这是 Cascader 集联选择器组件
- 一般用于选择一些层级关联的数据,如选择地区等
数据结构
Key
// 值需为 string
type Key = string;
LoadData
interface LoadData {
(expandedKeys: Key[]): Promise<void>;
}
CascadeData
interface CascadeData {
// 唯一键,所有值的字符串不得重复,会用作 key 和选中判定,如果为其它值会转为 string 再应用
key: Key;
// 选项标题内容
title: ReactNode;
// 子数据,存在即为父节点,不存在即为叶子结点,与程序树有差异,原因详见说明
children?: CascadeData[];
// 是否禁用,父节点禁用会禁用所有子孙节点
disabled?: boolean;
// 是否强制为父节点
isParent?: boolean;
}