mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 13:59:11 +08:00
59 lines
1.5 KiB
Markdown
59 lines
1.5 KiB
Markdown
---
|
|
order: 0
|
|
title: 基本
|
|
---
|
|
|
|
最简单的用法,展示可勾选,可选中,禁用,默认展开等功能。
|
|
|
|
````jsx
|
|
import { Tree } from 'antd';
|
|
const TreeNode = Tree.TreeNode;
|
|
|
|
const Demo = React.createClass({
|
|
getDefaultProps() {
|
|
return {
|
|
keys: ['0-0-0', '0-0-1'],
|
|
};
|
|
},
|
|
getInitialState() {
|
|
const keys = this.props.keys;
|
|
return {
|
|
defaultExpandedKeys: keys,
|
|
defaultSelectedKeys: keys,
|
|
defaultCheckedKeys: keys,
|
|
};
|
|
},
|
|
onExpand(treeNode, expand, expandedKeys) {
|
|
console.log('onExpand', expand, expandedKeys);
|
|
},
|
|
onSelect(info) {
|
|
console.log('selected', info);
|
|
},
|
|
onCheck(info) {
|
|
console.log('onCheck', info);
|
|
},
|
|
render() {
|
|
return (
|
|
<Tree className="myCls" showLine multiple checkable
|
|
defaultExpandedKeys={this.state.defaultExpandedKeys}
|
|
onExpand={this.onExpand}
|
|
defaultSelectedKeys={this.state.defaultSelectedKeys}
|
|
defaultCheckedKeys={this.state.defaultCheckedKeys}
|
|
onSelect={this.onSelect} onCheck={this.onCheck}>
|
|
<TreeNode title="parent 1" key="0-0">
|
|
<TreeNode title="parent 1-0" key="0-0-0" disabled>
|
|
<TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
|
|
<TreeNode title="leaf" key="0-0-0-1" />
|
|
</TreeNode>
|
|
<TreeNode title="parent 1-1" key="0-0-1">
|
|
<TreeNode title={<span style={{ color: '#08c' }}>sss</span>} key="0-0-1-0" />
|
|
</TreeNode>
|
|
</TreeNode>
|
|
</Tree>
|
|
);
|
|
},
|
|
});
|
|
|
|
ReactDOM.render(<Demo />, mountNode);
|
|
````
|