antd-multi-asl-cascader-uppro
Version:
A multiple cascader component for antd
103 lines (85 loc) ā¢ 7.49 kB
Markdown
# ššš News
Antd@4.17.0 has supported multiple cascader features. Should consider it first.
# antd-multi-cascader
  
[](https://helkyle.github.io/antd-multi-cascader/)
[](https://www.npmjs.com/package/antd-multi-cascader)
A multiple cascader component for antd
[](https://npmjs.org/package/antd-multi-cascader)
<a href="https://codesandbox.io/s/dreamy-jennings-2y1ff?file=/src/App.tsx" target="_blank">Online Demo</a>ļ¼<a href="https://juejin.cn/post/6914994241940750343" target="_blank">How it works?</a>
<div style="max-width: 420px">
<img src="https://raw.githubusercontent.com/HelKyle/antd-multi-cascader/main/demo.png" alt="demo" />
</div>
### How to use?
```
npm install antd-multi-cascader or yarn add antd-multi-cascader
```
```js
const [value, setValue] = React.useState<string[]>([]);
return (
<MultiCascader
value={value}
onChange={setValue}
data={options}
placeholder="Select Cities"
/>
)
```
### Props
šØ Please install 1.3.0 version or set popupTransitionName=slide-up manually if your antd version below 4.13.0
šØ å¦ęä½ ä½æēØē antd ēę¬å°äŗ 4.13.0ļ¼čÆ·å®č£
1.3.0 ēēę¬ļ¼ęęåØč®¾ē½® popupTransitionName=slide-up
| Props | Type | Description |
| ------------------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| value | string[] | Selected value |
| data | TreeNode[] | Cascader options TreeNode { title: string, value: string, children?: TreeNode, isLeaf?: boolean } |
| allowClear | boolean | Whether allow clear |
| placeholder | string | The input placeholder |
| onChange | (newVal) => void | Callback when finishing value select |
| selectAll | boolean | Whether allow select all |
| className | string | The additional css class |
| style | React.CSSProperties | The additional style |
| disabled | boolean | Whether disabled select |
| okText | string | The text of the Confirm button |
| cancelText | string | The text of the Cancel button |
| selectAllText | string | The text of the SelectAll radio |
| onCascaderChange | (node: TreeNode, operations: { add: (children: TreeNode[]) => TreeNode[] }) => void | Trigger when click a menu item |
| popupTransitionName | string | <strong>Should set 'slide-up' manually if antd version below 4.13.0</strong> |
| getPopupContainer | (props: any) => HTMLElement | Parent Node which the selector should be rendered to. Default to body. When position issues happen, try to modify it into scrollable content and position it relative |
| maxTagCount | Max tag count to show. responsive will cost render performance | number \| responsive |
#### Async Data Example
```js
const [asyncOptions, setAsyncOptions] = React.useState([
{
value: 'ParentNode1',
title: 'ParentNode1',
// tell component this node is not a leaf node
isLeaf: false,
},
{
value: 'ParentNode2',
title: 'ParentNode2',
},
])
const handleCascaderChange = React.useCallback((node, { add }) => {
// call add function to append children nodes
if (node.value === 'ParentNode1' && !node.children) {
setTimeout(() => {
setAsyncOptions(
add([
{
value: 'ParentNode1-1',
title: 'ParentNode1-1',
},
])
)
}, 1000)
}
}, [])
<MultiCascader
selectAll
data={asyncOptions}
onCascaderChange={handleCascaderChange}
placeholder="Async Data"
/>
```