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 的配置 |
说明
- 这是 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;
}