@rc-component/cascader
+
Part of the Ant Design ecosystem.
🧭 React Cascader component for selecting values from hierarchical option trees, with search, multiple selection, async loading, and custom rendering.
+ +
+ 
+ 
+ 
+ 
+ 
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
-
-## Example
-
-https://cascader-react-component.vercel.app
+ Part of the Ant Design ecosystem.
🧭 React Cascader component for selecting values from hierarchical option trees, with search, multiple selection, async loading, and custom rendering.
+ +
+
+
+
+
+
English | 简体中文
+ + +## Highlights + +| Area | Support | +| --------- | ---------------------------------------------------------------- | +| Data | Nested options, field name mapping, disabled nodes | +| Selection | Single, multiple, checkable, and change-on-select flows | +| Search | Controlled search, custom filter, custom sort, custom render | +| Loading | Async option loading with `loadData` | +| Rendering | Custom option label, dropdown content, icons, and expand trigger | ## Install -[](https://npmjs.org/package/@rc-component/cascader) - ```bash -$ npm install @rc-component/cascader --save +npm install @rc-component/cascader ``` ## Usage -```js -import React from 'react'; +```tsx | pure import Cascader from '@rc-component/cascader'; -const options = [{ - 'label': '福建', - 'value': 'fj', - 'children': [{ - 'label': '福州', - 'value': 'fuzhou', - 'children': [{ - 'label': '马尾', - 'value': 'mawei', - }], - }, { - 'label': '泉州', - 'value': 'quanzhou', - }], -}, { - 'label': '浙江', - 'value': 'zj', - 'children': [{ - 'label': '杭州', - 'value': 'hangzhou', - 'children': [{ - 'label': '余杭', - 'value': 'yuhang', - }], - }], -}, { - 'label': '北京', - 'value': 'bj', - 'children': [{ - 'label': '朝阳区', - 'value': 'chaoyang', - }, { - 'label': '海淀区', - 'value': 'haidian', - }], -}]; - -React.render( +const options = [ + { + label: 'Zhejiang', + value: 'zhejiang', + children: [ + { + label: 'Hangzhou', + value: 'hangzhou', + children: [{ label: 'Xihu', value: 'xihu' }], + }, + ], + }, + { + label: 'Jiangsu', + value: 'jiangsu', + children: [{ label: 'Nanjing', value: 'nanjing' }], + }, +]; + +export default () => (| name | -type | -default | -description | -
|---|---|---|---|
| options | -Object | -- | The data options of cascade | -
| value | -Array | -- | selected value | -
| defaultValue | -Array | -- | initial selected value | -
| onChange | -Function(value, selectedOptions) | -- | callback when finishing cascader select | -
| changeOnSelect | -Boolean | -false | -change value on each selection | -
| loadData | -Function(selectedOptions) | -- | callback when click any option, use for loading more options | -
| expandTrigger | -String | -'click' | -expand current item when click or hover | -
| open | -Boolean | -- | visibility of popup overlay | -
| onPopupVisibleChange | -Function(visible) | -- | callback when popup overlay's visibility changed | -
| transitionName | -String | -- | transition className like "slide-up" | -
| prefixCls | -String | -rc-cascader | -prefix className of popup overlay | -
| popupClassName | -String | -- | additional className of popup overlay | -
| popupPlacement | -String | -bottomLeft | -use preset popup align config from builtinPlacements：bottomRight topRight bottomLeft topLeft | -
| getPopupContainer | -function(trigger:Node):Node | -() => document.body | -container which popup select menu rendered into | -
| dropdownMenuColumnStyle | -Object | -- | style object for each cascader pop menu | -
| fieldNames | -Object | -{ label: 'label', value: 'value', children: 'children' } | -custom field name for label and value and children | -
| expandIcon | -ReactNode | -> | -specific the default expand icon | -
| loadingIcon | -ReactNode | -> | -specific the default loading icon | -
| hidePopupOnSelect | -Boolean | ->true | -hide popup on select | -
| showSearch | -boolean | object | -false | -Whether show search input in single mode | -
| name | -type | -default | -description | -
|---|---|---|---|
| label | -String | -- | option text to display | -
| value | -String | -- | option value as react key | -
| disabled | -Boolean | -- | disabled option | -
| children | -Array | -- | children options | -
Ant Design 生态的一部分。
🧭 React 级联选择组件，支持层级选项、搜索、多选、异步加载和自定义渲染。
+ +
+
+
+
+
+
English | 简体中文
+ + +## 特性 + +| 范围 | 支持 | +| --------- | ---------------------------------------------------------------- | +| 数据 | 嵌套选项、字段名映射和禁用节点 | +| 选择 | 单选、多选、勾选和逐级选择流程 | +| 搜索 | 受控搜索、自定义过滤、自定义排序和自定义渲染 | +| 加载 | 通过 `loadData` 异步加载选项 | +| 渲染 | 自定义选项标签、下拉内容、图标和展开触发方式 | + +## 安装 + +```bash +npm install @rc-component/cascader +``` + +## 使用 + +```tsx | pure +import Cascader from '@rc-component/cascader'; + +const options = [ + { + label: 'Zhejiang', + value: 'zhejiang', + children: [ + { + label: 'Hangzhou', + value: 'hangzhou', + children: [{ label: 'Xihu', value: 'xihu' }], + }, + ], + }, + { + label: 'Jiangsu', + value: 'jiangsu', + children: [{ label: 'Nanjing', value: 'nanjing' }], + }, +]; + +export default () => ( +