Browse Source
* feat: add showCheckedStrategy api for cascader * feat: update doc * feat: add demo and update doc * feat: update demopull/34738/head
黑雨
3 years ago
committed by
GitHub
GitHub
6 changed files with 539 additions and 2 deletions
@ -0,0 +1,90 @@ |
|||
--- |
|||
order: 5.1 |
|||
version: 4.20.0 |
|||
title: |
|||
zh-CN: 自定义回填方式 |
|||
en-US: ShowCheckedStrategy |
|||
--- |
|||
|
|||
## zh-CN |
|||
|
|||
通过设置 `ShowCheckedStrategy` 选择回填方式。 |
|||
|
|||
## en-US |
|||
|
|||
The way show selected item in box using `ShowCheckedStrategy`. |
|||
|
|||
```jsx |
|||
import { Cascader } from 'antd'; |
|||
|
|||
const { SHOW_CHILD } = Cascader; |
|||
|
|||
const options = [ |
|||
{ |
|||
label: 'Light', |
|||
value: 'light', |
|||
children: new Array(20) |
|||
.fill(null) |
|||
.map((_, index) => ({ label: `Number ${index}`, value: index })), |
|||
}, |
|||
{ |
|||
label: 'Bamboo', |
|||
value: 'bamboo', |
|||
children: [ |
|||
{ |
|||
label: 'Little', |
|||
value: 'little', |
|||
children: [ |
|||
{ |
|||
label: 'Toy Fish', |
|||
value: 'fish', |
|||
}, |
|||
{ |
|||
label: 'Toy Cards', |
|||
value: 'cards', |
|||
}, |
|||
{ |
|||
label: 'Toy Bird', |
|||
value: 'bird', |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
|
|||
const App = () => { |
|||
const onChange = value => { |
|||
console.log(value); |
|||
}; |
|||
return ( |
|||
<> |
|||
<Cascader |
|||
style={{ width: '100%' }} |
|||
options={options} |
|||
onChange={onChange} |
|||
multiple |
|||
maxTagCount="responsive" |
|||
showCheckedStrategy={SHOW_CHILD} |
|||
defaultValue={[ |
|||
['bamboo', 'little', 'fish'], |
|||
['bamboo', 'little', 'cards'], |
|||
['bamboo', 'little', 'bird'], |
|||
]} |
|||
/> |
|||
<br /> |
|||
<br /> |
|||
<Cascader |
|||
style={{ width: '100%' }} |
|||
options={options} |
|||
onChange={onChange} |
|||
multiple |
|||
maxTagCount="responsive" |
|||
defaultValue={['bamboo']} |
|||
/> |
|||
</> |
|||
); |
|||
}; |
|||
|
|||
ReactDOM.render(<App />, mountNode); |
|||
``` |
|||
Loading…
Reference in new issue