Tree selection control.
When To Use#
TreeSelect
is similar to Select
, but the values are provided in a tree like structure. Any data whose entries are defined in a hierarchical manner is fit to use this control. Examples of such case may include a corporate hierarchy, a directory structure, and so on.
import { TreeSelect } from 'antd'; const { TreeNode } = TreeSelect; class Demo extends React.Component { state = { value: undefined, }; onChange = value => { console.log(value); this.setState({ value }); }; render() { return ( <TreeSelect showSearch style={{ width: '100%' }} value={this.state.value} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} placeholder="Please select" allowClear 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);
import { TreeSelect } from 'antd'; const treeData = [ { title: 'Node1', value: '0-0', key: '0-0', children: [ { title: 'Child Node1', value: '0-0-1', key: '0-0-1', }, { title: 'Child Node2', value: '0-0-2', key: '0-0-2', }, ], }, { title: 'Node2', value: '0-1', key: '0-1', },
]; class Demo extends React.Component { state = { value: undefined, }; onChange = value => { console.log(value); this.setState({ value }); }; render() { return ( <TreeSelect style={{ width: '100%' }} value={this.state.value} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} treeData={treeData} placeholder="Please select" treeDefaultExpandAll onChange={this.onChange} /> ); }
} ReactDOM.render(<Demo />, mountNode);
import { TreeSelect } from 'antd'; class Demo extends React.Component { state = { value: undefined, treeData: [ { id: 1, pId: 0, value: '1', title: 'Expand to load' }, { id: 2, pId: 0, value: '2', title: 'Expand to load' }, { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true }, ], }; genTreeNode = (parentId, isLeaf = false) => { const random = Math.random() .toString(36) .substring(2, 6); return { id: random, pId: parentId, value: random, title: isLeaf ? 'Tree Node' : 'Expand to load', isLeaf, }; }; onLoadData = treeNode => new Promise(resolve => { const { id } = treeNode.props; setTimeout(() => { this.setState({ treeData: this.state.treeData.concat([ this.genTreeNode(id, false), this.genTreeNode(id, true), ]), }); resolve(); }, 300); }); onChange = value => { console.log(value); this.setState({ value }); }; render() { const { treeData } = this.state; return ( <TreeSelect treeDataSimpleMode style={{ width: '100%' }} value={this.state.value} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} placeholder="Please select" onChange={this.onChange} loadData={this.onLoadData} treeData={treeData} /> ); }
} ReactDOM.render(<Demo />, mountNode);
import { TreeSelect } from 'antd'; const { TreeNode } = TreeSelect; class Demo extends React.Component { state = { value: undefined, }; onChange = value => { console.log(value); this.setState({ value }); }; render() { return ( <TreeSelect showSearch style={{ width: '100%' }} 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);
import { TreeSelect } from 'antd'; const { SHOW_PARENT } = TreeSelect; const treeData = [ { title: 'Node1', value: '0-0', key: '0-0', children: [ { title: 'Child Node1', value: '0-0-0', key: '0-0-0', }, ], }, { title: 'Node2', value: '0-1', key: '0-1', children: [ { title: 'Child Node3', value: '0-1-0', key: '0-1-0', }, { title: 'Child Node4', value: '0-1-1', key: '0-1-1', }, { title: 'Child Node5', value: '0-1-2', key: '0-1-2', }, ], },
]; class Demo extends React.Component { state = { value: ['0-0-0'], }; onChange = value => { console.log('onChange ', value); this.setState({ value }); }; render() { const tProps = { treeData, value: this.state.value, onChange: this.onChange, treeCheckable: true, showCheckedStrategy: SHOW_PARENT, searchPlaceholder: 'Please select', style: { width: '100%', }, }; return <TreeSelect {...tProps} />; }
} ReactDOM.render(<Demo />, mountNode);
Property | Description | Type | Default | Version |
---|---|---|---|---|
allowClear | Whether allow clear | boolean | false | |
autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true | 3.7.0 |
defaultValue | To set the initial selected treeNode(s). | string|string[] | - | |
disabled | Disabled or not | boolean | false | |
dropdownClassName | className of dropdown menu | string | - | 3.3.0 |
dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set min-width same as input. | boolean | true | |
dropdownStyle | To set the style of the dropdown menu | object | - | |
filterTreeNode | Whether to filter treeNodes by input value. The value of treeNodeFilterProp is used for filtering by default. | boolean|Function(inputValue: string, treeNode: TreeNode) (should return boolean) | Function | |
getPopupContainer | To set the container of the dropdown menu. The default is to create a div element in body , you can reset it to the scrolling area and make a relative reposition. example | Function(triggerNode) | () => document.body | |
labelInValue | whether to embed label in value, turn the format of value from string to {value: string, label: ReactNode, halfChecked: string[]} | boolean | false | |
loadData | Load data asynchronously. | function(node) | - | |
maxTagCount | Max tag count to show | number | - | 3.7.0 |
maxTagPlaceholder | Placeholder for not showing tags | ReactNode/function(omittedValues) | - | 3.7.0 |
multiple | Support multiple or not, will be true when enable treeCheckable . | boolean | false | |
placeholder | Placeholder of the select input | string | - | |
searchPlaceholder | Placeholder of the search input | string | - | |
searchValue | work with onSearch to make search value controlled. | string | - | 3.7.0 |
treeIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to true | boolean | false | 3.13.1 |
showCheckedStrategy | The way show selected item in box. Default: just show child nodes. TreeSelect.SHOW_ALL : show all checked treeNodes (include parent treeNode). TreeSelect.SHOW_PARENT : show checked treeNodes (just show parent treeNode). | enum { TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD | |
showSearch | Support search or not | boolean | single: false | multiple: true | |
size | To set the size of the select input, options: large small | string | 'default' | |
suffixIcon | The custom suffix icon | ReactNode | - | 3.10.0 |
treeCheckable | Whether to show checkbox on the treeNodes | boolean | false | |
treeCheckStrictly | Whether to check nodes precisely (in the checkable mode), means parent and child nodes are not associated, and it will make labelInValue be true | boolean | false | |
treeData | Data of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value) | array\<{ value, title, children, [disabled, disableCheckbox, selectable, checkable] }> | [] | |
treeDataSimpleMode | Enable simple mode of treeData. Changes the treeData schema to: [{id:1, pId:0, value:'1', title:"test1",...},...] where pId is parent node's id). It is possible to replace the default id and pId keys by providing object to treeDataSimpleMode | false|object\<{ id: string, pId: string, rootPId: string }> | false | |
treeDefaultExpandAll | Whether to expand all treeNodes by default | boolean | false | |
treeDefaultExpandedKeys | Default expanded treeNodes | string[] | - | |
treeExpandedKeys | Set expanded keys | string[] | - | 3.10.0 |
treeNodeFilterProp | Will be used for filtering if filterTreeNode returns true | string | 'value' | |
treeNodeLabelProp | Will render as content of select | string | 'title' | |
value | To set the current selected treeNode(s). | string|string[] | - | |
onChange | A callback function, can be executed when selected treeNodes or input value change | function(value, label, extra) | - | |
onSearch | A callback function, can be executed when the search input changes. | function(value: string) | - | |
onSelect | A callback function, can be executed when you select a treeNode. | function(value, node, extra) | - | |
onTreeExpand | A callback function, can be executed when treeNode expanded | function(expandedKeys) | - | 3.10.0 |
Name | Description | Version |
---|---|---|
blur() | remove focus | |
focus() | get focus |
We recommend you to use
treeData
rather thanTreeNode
, to avoid the trouble of manual construction.
Property | Description | Type | Default | Version |
---|---|---|---|---|
selectable | can be selected | boolean | true | 3.9.3 |
checkable | When Tree is checkable, set TreeNode display Checkbox or not | boolean | - | 3.17.0 |
disableCheckbox | Disables the checkbox of the treeNode | boolean | false | |
disabled | Disabled or not | boolean | false | |
isLeaf | Leaf node or not | boolean | false | |
key | Required property (unless using treeDataSimpleMode ), should be unique in the tree | string | - | |
title | Content showed on the treeNodes | string|ReactNode | '---' | |
value | Will be treated as treeNodeFilterProp by default, should be unique in the tree | string | - |
We don't provide this since performance consideration. You can get by this way: https://codesandbox.io/s/wk080nn81k