Cascader 级联选择器

当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。

Cascader

Props

Prop NameTypeRequiredDefaultDescription
dataSource
CascadeData[]
数据源
value
Key[]
选中的值
defaultValue
Key[]
默认值,非受控
onChange
(value: Key[] | void) => void
选中回调
disabledboolean
是否禁用
sizeSize
尺寸
search
| boolean
| {
/** 自定义搜索函数 */
handleSearch?: (
searchValue: string,
dataSource: CascadeData[]
) => {
dataSource: CascadeData[];
count?: number;
};
}
使用搜索
loadDataLoadData
异步加载数据操作
clearableboolean
是否可清空
statusInputProps['status']
状态
popoverProps
{ [key: string]: any }
自定义 popover 的配置
separatorstring
分隔符

说明

  • 这是 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;
}

演示

功能演示

VIEW CODE ( LIVE )

尺寸 - size

VIEW CODE ( LIVE )

禁用 - disabled

VIEW CODE ( LIVE )

是否可清空 - clearable

VIEW CODE ( LIVE )

搜索 - search

VIEW CODE ( LIVE )

异步加载 - loadData

VIEW CODE ( LIVE )

性能测试

VIEW CODE ( LIVE )

边界测试

VIEW CODE ( LIVE )
Copyright © 2021-2024 UCloud 优刻得科技股份有限公司