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

Please select

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

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,
      multiple: true,
      treeCheckable: true,
      showCheckedStrategy: SHOW_PARENT,
      searchPlaceholder: 'Please select',
      style: {
        width: 300,
      },
    };
    return <TreeSelect {...tProps} />;
  }
}

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

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

API#

Tree props#

PropertyDescriptionTypeDefault
valueTo set the current selected treeNode(s).string|string[]-
labelInValuewhether to embed label in value, turn the format of value from string to `{key: string, label: ReactNode, halfChecked: string[]} | boolean | false
defaultValueTo set the initial selected treeNode(s).string|string[]-
multipleSupport multiple or not, will be true when enable treeCheckable.booleanfalse
onSelectA callback function, can be executed when you select a treeNode.function(value, node, extra)-
onChangeA callback function, can be executed when selected treeNodes or input value changefunction(value, label, extra)-
allowClearWhether allow clearbooleanfalse
onSearchA callback function, can be executed when the search input changes.function(value: string)-
placeholderPlaceholder of the select inputstring-
searchPlaceholderPlaceholder of the search inputstring-
dropdownStyleTo set the style of the dropdown menuobject-
dropdownMatchSelectWidthDetermine whether the dropdown menu and the select input are the same widthbooleantrue
sizeTo set the size of the select input, options: large smallstring'default'
showSearchWhether to display a search input in the dropdown menu(valid only in the single mode)booleanfalse
disabledDisabled or notbooleanfalse
showCheckedStrategyDefault: 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
treeDefaultExpandAllWhether to expand all treeNodes by defaultbooleanfalse
treeDefaultExpandedKeysDefault expanded treeNodesstring[]-
treeCheckableWhether to show checkbox on the treeNodesbooleanfalse
treeCheckStrictlyWhether to check nodes precisely(in the checkable mode), means parent and child nodes are not associatedbooleanfalse
filterTreeNodeWhether 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
treeNodeFilterPropWill be used for filtering if filterTreeNode returns truestring'value'
treeNodeLabelPropWill render as content of selectstring'title'
treeDataData 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, selectable] }>[]
treeDataSimpleModeEnable 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
loadDataLoad data asynchronously.function(node)-
getPopupContainerTo 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. exampleFunction(triggerNode)() => document.body

TreeNode props#

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

PropertyDescriptionTypeDefault
disabledDisabled or notbooleanfalse
keyRequired property, should be unique in the treestring-
valueWill be treated as treeNodeFilterProp by default, should be unique in the treestring-
titleContent showed on the treeNodesstring|ReactNode'---'
isLeafLeaf node or notbooleanfalse