ant-design/components/tree-select/demo/checkable.md

77 lines
1.2 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 2
2016-08-05 11:47:31 +08:00
title:
zh-CN: 多选
en-US: Multiple
2016-03-31 09:40:55 +08:00
---
2015-12-28 19:16:02 +08:00
2016-08-05 11:47:31 +08:00
## zh-CN
2016-02-01 17:06:54 +08:00
多选和勾选框功能。
2015-12-28 19:16:02 +08:00
2016-08-05 11:47:31 +08:00
## en-US
Multiple and checkable.
2017-01-19 15:19:03 +08:00
````__react
2015-12-28 19:16:02 +08:00
import { TreeSelect } from 'antd';
2016-03-14 16:18:30 +08:00
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
2015-12-28 19:16:02 +08:00
2016-02-01 17:06:54 +08:00
const treeData = [{
2016-08-05 11:47:31 +08:00
label: 'Node1',
value: '0-0',
key: '0-0',
children: [{
2016-08-05 11:47:31 +08:00
label: 'Child Node1',
value: '0-0-0',
key: '0-0-0',
2016-02-01 17:06:54 +08:00
}],
}, {
2016-08-05 11:47:31 +08:00
label: 'Node2',
value: '0-1',
key: '0-1',
children: [{
2016-08-05 11:47:31 +08:00
label: 'Child Node3',
value: '0-1-0',
key: '0-1-0',
2016-02-01 17:06:54 +08:00
}, {
2016-08-05 11:47:31 +08:00
label: 'Child Node4',
value: '0-1-1',
key: '0-1-1',
}, {
2016-08-05 11:47:31 +08:00
label: 'Child Node5',
value: '0-1-2',
key: '0-1-2',
2016-02-01 17:06:54 +08:00
}],
}];
2015-12-28 19:16:02 +08:00
const Demo = React.createClass({
getInitialState() {
return {
2016-02-01 17:06:54 +08:00
value: ['0-0-0'],
2015-12-28 19:16:02 +08:00
};
},
2015-12-31 14:38:35 +08:00
onChange(value) {
2016-02-01 14:36:41 +08:00
console.log('onChange ', value, arguments);
2016-01-23 15:30:14 +08:00
this.setState({ value });
2015-12-28 19:16:02 +08:00
},
render() {
2015-12-31 14:38:35 +08:00
const tProps = {
2016-02-01 17:06:54 +08:00
treeData,
2015-12-31 14:38:35 +08:00
value: this.state.value,
onChange: this.onChange,
multiple: true,
2016-01-15 20:10:46 +08:00
treeCheckable: true,
2016-03-14 16:18:30 +08:00
showCheckedStrategy: SHOW_PARENT,
2016-08-05 11:47:31 +08:00
searchPlaceholder: 'Please select',
2016-02-01 17:06:54 +08:00
style: {
2016-02-22 23:51:26 +08:00
width: 300,
2016-02-01 17:06:54 +08:00
},
2015-12-28 19:16:02 +08:00
};
2016-02-01 17:06:54 +08:00
return <TreeSelect {...tProps} />;
2015-12-28 19:16:02 +08:00
},
});
2016-01-27 12:00:27 +08:00
ReactDOM.render(<Demo />, mountNode);
2015-12-28 19:16:02 +08:00
````