CascaderSelect 级联选择

使用场景

在一组相关联的数据集合进行选择，例如省市区、组织架构树、商品分类等。

note

因为 Cascader/CascaderSelect 在某一个层级一次只能打开一个列表，Cascader/CascaderSelect 被设计为 仅支持单个父节点下 叶子节点的单选或多选。

跨父节点，跨层级，父节点可被选中，或是其他通用的树形选择场景请使用 Tree 或 TreeSelect 组件。

单选与多选

CascaderSelect 支持以下两种方式来开启多选模式：

• 设置 multiple={true}
• 使用 <CascaderSelect.Multi /> 组件

在 TypeScript 项目中，我们推荐使用组件来切换单选（CascaderSelect.Single）和多选（CascaderSelect.Multi），类型提示和检查将更准确。

示例

基本示例

inline

// 以下变量从其他模块中引入： // bigTreeDataSource function Basic() { return <CascaderSelect.Single dataSource={bigTreeDataSource} />; }

// 以下变量从其他模块中引入：
//  bigTreeDataSource

function Basic() {
  return <CascaderSelect.Single dataSource={bigTreeDataSource} />;
}

多选

请选择

inline

// 以下变量从其他模块中引入： // bigTreeDataSource function Multiple() { return <CascaderSelect.Multi dataSource={bigTreeDataSource} />; }

// 以下变量从其他模块中引入：
//  bigTreeDataSource

function Multiple() {
  return <CascaderSelect.Multi dataSource={bigTreeDataSource} />;
}

搜索

请选择

inline

// 以下变量从其他模块中引入： // bigTreeDataSource function Search() { return <CascaderSelect.Multi showSearch dataSource={bigTreeDataSource} />; }

// 以下变量从其他模块中引入：
//  bigTreeDataSource

function Search() {
  return <CascaderSelect.Multi showSearch dataSource={bigTreeDataSource} />;
}

错误状态

请选择

inline

// 以下变量从其他模块中引入： // bigTreeDataSource function Status() { return <CascaderSelect.Multi status="error" dataSource={bigTreeDataSource} />; }

// 以下变量从其他模块中引入：
//  bigTreeDataSource

function Status() {
  return <CascaderSelect.Multi status="error" dataSource={bigTreeDataSource} />;
}

禁用状态

Option 1

淘宝

共 2 项

inline

// 以下变量从其他模块中引入： // bigTreeDataSource function Disabled() { return <CascaderSelect.Multi disabled dataSource={bigTreeDataSource} value={['1', '淘宝']} />; }

// 以下变量从其他模块中引入：
//  bigTreeDataSource

function Disabled() {
  return <CascaderSelect.Multi disabled dataSource={bigTreeDataSource} value={['1', '淘宝']} />;
}

API

字段	描述
defaultValue	string | string[]
value	string | string[]
onChange	(nextValue: string | string[], detail: {}) => void
multiple	boolean 是否多选
disabled	boolean
dataSource	TreeSelectItem[]
expandedKeys	string[] 展开节点
onExpand	Dispatch<SetStateAction<string[]>> 节点展开的回调函数
defaultExpandedKeys	string[] 默认展开的节点
maxDepth	number
外观
size	string 选择器尺寸
style	CSSProperties
className	string
placeholder	string 选择器值为空时，trigger 上的占位文本
hasArrow	boolean 是否有下拉箭头
fill	boolean 选择器宽度是否占满容器
shape	"simple" | "solid" 选择器形状
hasClear	boolean 是否有清除按钮
status	"normal" | "error" | "success" | "warning" 选择器状态
containerProps	HTMLAttributes<HTMLDivElement>
弹层
visible	boolean 弹层是否打开
onRequestClose	(reason?: any) => void
defaultVisible	boolean 弹层是否默认打开
onRequestOpen	(reason?: any) => void
autoWidth	boolean = true
autoHeight	boolean = true
autoScrollToFirstItemWhenOpen	boolean = true 选择器弹层被打开时，是否自动滚动到第一个选中的元素
autoCloseAfterSelect	boolean 选择元素时，是否自动关闭弹层。 单选模式下默认为 true，多选模式下默认为 false
popupProps	PopupProps 透传给 Popup 组件的 props
搜索
showSearch	boolean 是否支持搜索功能
searchValue	string 搜索关键字
defaultSearchValue	string 非受控用法，默认的搜索关键字
onSearch	(nextSearchValue: string, detail: { event: any; }) => void 关键字修改回调
notFoundContent	ReactNode 搜索结果为空时的展示内容