mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
Add multiple demo for TreeSelect
This commit is contained in:
parent
55f58cf59f
commit
50bdbbda40
@ -86,6 +86,45 @@ exports[`renders ./components/tree-select/demo/checkable.md correctly 1`] = `
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tree-select/demo/multiple.md correctly 1`] = `
|
||||
<span
|
||||
class="ant-select ant-select-enabled ant-select-allow-clear"
|
||||
style="width:300px;"
|
||||
>
|
||||
<span
|
||||
aria-autocomplete="list"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--multiple"
|
||||
role="combobox"
|
||||
>
|
||||
<ul
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<li
|
||||
class="ant-select-search ant-select-search--inline"
|
||||
>
|
||||
<span
|
||||
class="ant-select-search__field__wrap"
|
||||
>
|
||||
<input
|
||||
class="ant-select-search__field"
|
||||
role="textbox"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<span
|
||||
class="ant-select-search__field__placeholder"
|
||||
style="display:block;"
|
||||
>
|
||||
Please select
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tree-select/demo/treeData.md correctly 1`] = `
|
||||
<span
|
||||
class="ant-select ant-select-enabled"
|
||||
|
@ -1,13 +1,13 @@
|
||||
---
|
||||
order: 2
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 多选
|
||||
en-US: Multiple
|
||||
zh-CN: 可勾选
|
||||
en-US: Checkable
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
多选和勾选框功能。
|
||||
使用勾选框实现多选功能。
|
||||
|
||||
## en-US
|
||||
|
||||
@ -58,7 +58,6 @@ class Demo extends React.Component {
|
||||
treeData,
|
||||
value: this.state.value,
|
||||
onChange: this.onChange,
|
||||
multiple: true,
|
||||
treeCheckable: true,
|
||||
showCheckedStrategy: SHOW_PARENT,
|
||||
searchPlaceholder: 'Please select',
|
||||
|
56
components/tree-select/demo/multiple.md
Normal file
56
components/tree-select/demo/multiple.md
Normal file
@ -0,0 +1,56 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 多选
|
||||
en-US: Multiple Selection
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
多选的树选择。
|
||||
|
||||
## en-US
|
||||
|
||||
Multiple selection usage.
|
||||
|
||||
````jsx
|
||||
import { TreeSelect } from 'antd';
|
||||
const TreeNode = TreeSelect.TreeNode;
|
||||
|
||||
class Demo extends React.Component {
|
||||
state = {
|
||||
value: undefined,
|
||||
}
|
||||
onChange = (value) => {
|
||||
console.log(arguments);
|
||||
this.setState({ value });
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<TreeSelect
|
||||
showSearch
|
||||
style={{ width: 300 }}
|
||||
value={this.state.value}
|
||||
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||||
placeholder="Please select"
|
||||
allowClear
|
||||
multiple
|
||||
treeDefaultExpandAll
|
||||
onChange={this.onChange}
|
||||
>
|
||||
<TreeNode value="parent 1" title="parent 1" key="0-1">
|
||||
<TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
|
||||
<TreeNode value="leaf1" title="my leaf" key="random" />
|
||||
<TreeNode value="leaf2" title="your leaf" key="random1" />
|
||||
</TreeNode>
|
||||
<TreeNode value="parent 1-1" title="parent 1-1" key="random2">
|
||||
<TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
|
||||
</TreeNode>
|
||||
</TreeNode>
|
||||
</TreeSelect>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
````
|
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 1
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 从数据直接生成
|
||||
en-US: Generate form tree data
|
||||
|
Loading…
Reference in New Issue
Block a user