TreeSelect

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.

Examples

Basic

The most basic usage.

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
        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);

Generate form tree data

The tree structure can be populated using treeData property. This is a quick and easy way to provide the tree content.

import { TreeSelect } from 'antd';

const treeData = [{
  label: 'Node1',
  value: '0-0',
  key: '0-0',
  children: [{
    label: 'Child Node1',
    value: '0-0-1',
    key: '0-0-1',
  }, {
    label: 'Child Node2',
    value: '0-0-2',
    key: '0-0-2',
  }],
}, {
  label: 'Node2',
  value: '0-1',
  key: '0-1',
}];

class Demo extends React.Component {
  state = {
    value: undefined,
  }
  onChange = (value) => {
    console.log(arguments);
    this.setState({ value });
  }
  render() {
    return (
      <TreeSelect
        style={{ width: 300 }}
        value={this.state.value}
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        treeData={treeData}
        placeholder="Please select"
        treeDefaultExpandAll
        onChange={this.onChange}
      />
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

Multiple Selection

Multiple selection usage.

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);

Checkable

Multiple and checkable.

import { TreeSelect } from 'antd';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

const treeData = [{
  label: 'Node1',
  value: '0-0',
  key: '0-0',
  children: [{
    label: 'Child Node1',
    value: '0-0-0',
    key: '0-0-0',
  }],
}, {
  label: 'Node2',
  value: '0-1',
  key: '0-1',
  children: [{
    label: 'Child Node3',
    value: '0-1-0',
    key: '0-1-0',
  }, {
    label: 'Child Node4',
    value: '0-1-1',
    key: '0-1-1',
  }, {
    label: '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, arguments);
    this.setState({ value });
  }
  render() {
    const tProps = {
      treeData,
      value: this.state.value,
      onChange: this.onChange,
      treeCheckable: true,
      showCheckedStrategy: SHOW_PARENT,
      searchPlaceholder: 'Please select',
      style: {
        width: 300,
      },
    };
    return <TreeSelect {...tProps} />;
  }
}

ReactDOM.render(<Demo />, mountNode);

API#

Tree props#

Property	Description	Type	Default
value	To set the current selected treeNode(s).	string\|string[]	-
labelInValue	whether to embed label in value, turn the format of value from `string` to `{key: string, label: ReactNode, halfChecked: string[]} \| boolean \| false
defaultValue	To set the initial selected treeNode(s).	string\|string[]	-
multiple	Support multiple or not, will be `true` when enable `treeCheckable`.	boolean	false
onSelect	A callback function, can be executed when you select a treeNode.	function(value, node, extra)	-
onChange	A callback function, can be executed when selected treeNodes or input value change	function(value, label, extra)	-
allowClear	Whether allow clear	boolean	false
onSearch	A callback function, can be executed when the search input changes.	function(value: string)	-
placeholder	Placeholder of the select input	string	-
searchPlaceholder	Placeholder of the search input	string	-
dropdownStyle	To set the style of the dropdown menu	object	-
dropdownMatchSelectWidth	Determine whether the dropdown menu and the select input are the same width	boolean	true
size	To set the size of the select input, options: `large` `small`	string	'default'
showSearch	Whether to display a search input in the dropdown menu(valid only in the single mode)	boolean	false
disabled	Disabled or not	boolean	false
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
treeDefaultExpandAll	Whether to expand all treeNodes by default	boolean	false
treeDefaultExpandedKeys	Default expanded treeNodes	string[]	-
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
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
treeNodeFilterProp	Will be used for filtering if `filterTreeNode` returns true	string	'value'
treeNodeLabelProp	Will render as content of select	string	'title'
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, label, children, disabled, disableCheckbox, selectable }>	[]
treeDataSimpleMode	Enable simple mode of treeData.(treeData should like this: {id:1, pId:0, value:'1', label:"test1",...},..., pId is parent node's id)	false\|Array<{ id: string, pId: string, rootPId: null }>	false
loadData	Load data asynchronously.	function(node)	-
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

TreeNode props#

We recommend you to use treeData rather than TreeNode, to avoid the trouble of manual construction.

Property	Description	Type	Default
disabled	Disabled or not	boolean	false
disableCheckbox	Disables the checkbox of the treeNode	boolean	false
key	Required property, should be unique in the tree	string	-
value	Will be treated as `treeNodeFilterProp` by default, should be unique in the tree	string	-
title	Content showed on the treeNodes	string\|ReactNode	'---'
isLeaf	Leaf node or not	boolean	false