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

70 lines
1.2 KiB
Markdown
Raw Normal View History

2016-02-01 17:06:54 +08:00
# 多选
2015-12-28 19:16:02 +08:00
2016-02-01 17:06:54 +08:00
- order: 2
2015-12-28 19:16:02 +08:00
2016-02-01 17:06:54 +08:00
多选和勾选框功能。
2015-12-28 19:16:02 +08:00
---
````jsx
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 = [{
label: '节点一',
value: '0-0',
key: '0-0',
children: [{
label: '子节点一',
value: '0-0-0',
key: '0-0-0',
2016-02-01 17:06:54 +08:00
}, {
label: '子节点二',
value: '0-0-1',
key: '0-0-1',
2016-02-01 17:06:54 +08:00
}],
}, {
label: '节点二',
value: '0-1',
key: '0-1',
children: [{
label: '子节点三',
value: '0-1-0',
key: '0-1-0',
2016-02-01 17:06:54 +08:00
}, {
label: '子节点四',
value: '0-1-1',
key: '0-1-1',
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-02-22 21:12:00 +08:00
searchPlaceholder: '请选择',
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
````