---
category: Components
type: Data Entry
title: TreeSelect
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DfTMRYSDngEAAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Y5pcQLplFu4AAAAAAAAAAAAADrJ8AQ/original
---

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.

## API

### Tree props

| Property | Description | Type | Default | Version |  |
| --- | --- | --- | --- | --- | --- |
| allowClear | Whether allow clear | boolean | false |  |  |
| defaultValue | To set the initial selected treeNode(s). | string\|string\[] | - |  |  |
| disabled | Disabled or not | boolean | false |  |  |
| popupClassName | className of dropdown menu | string | - |  | 4.0 |
| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true |  |  |
| dropdownStyle | To set the style of the dropdown menu | object | - |  |  |
| fieldNames | Replace the label,value and children fields in treeNode with the corresponding fields in treeData | object | { children:'children', label:'title', value:'value' } |  | 3.0.0 |
| 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. | Function(triggerNode) | () => document.body |  |  |
| labelInValue | whether to embed label in value, turn the format of value from `string` to `{value: string, label: VNode, halfChecked: string[]}` | boolean | false |  |  |
| listHeight | Config popup height | number | 256 |  |  |
| loadData | Load data asynchronously. | function(node) | - |  |  |
| maxTagCount | Max tag count to show | number | - |  |  |
| maxTagPlaceholder | Placeholder for not showing tags | slot/function(omittedValues) | - |  |  |
| multiple | Support multiple or not, will be `true` when enable `treeCheckable`. | boolean | false |  |  |
| notFoundContent | Specify content to show when no result matches | slot | `Not Found` |  |  |
| placeholder | Placeholder of the select input | string\|slot | - |  |  |
| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | 3.3.0 |
| replaceFields | Replace the label,value, key and children fields in treeNode with the corresponding fields in treeData | object | { children:'children', label:'title', value: 'value' } |  | 1.6.1 (3.0.0 deprecated) |
| searchPlaceholder | Placeholder of the search input | string\|slot | - |  |  |
| searchValue(v-model) | work with `search` event to make search value controlled. | string | - |  |  |
| 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 | Whether to display a search input in the dropdown menu(valid only in the single mode) | boolean | false |  |  |
| size | To set the size of the select input, options: `large` `small` | string | 'default' |  |  |
| status | Set validation status | 'error' \| 'warning' | - | 3.3.0 |
| suffixIcon | The custom suffix icon | VNode \| slot | - |  |  |
| tagRender | Customize tag render when `multiple` | (props) => slot | - | 3.0 |  |
| title | custom title | slot |  | 3.0.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] }> | \[] |  |  |
| 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: null }> | false |  |  |
| treeDefaultExpandAll | Whether to expand all treeNodes by default | boolean | false |  |  |
| treeDefaultExpandedKeys | Default expanded treeNodes | string\[] \| number\[] | - |  |  |
| treeExpandedKeys(v-model) | Set expanded keys | string\[] \| number\[] | - |  |  |
| 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 |  |  |
| treeLoadedKeys | (Controlled) Set loaded tree nodes, work with `loadData` only | string[] | [] | 3.3.0 |
| treeLine | Show the line. Ref [Tree - showLine](/components/tree/#components-tree-demo-line) | boolean \| object | false | 3.0 |  |
| treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | 'value' |  |  |
| treeNodeLabelProp | Will render as content of select | string | 'title' |  |  |
| value(v-model) | To set the current selected treeNode(s). | string\|string\[] | - |  |  |
| virtual | Disable virtual scroll when set to false | boolean | true | 3.0 |  |

### Events

| Events Name | Description | Arguments | Version |
| --- | --- | --- | --- |
| change | A callback function, can be executed when selected treeNodes or input value change | function(value, label, extra) |  |
| dropdownVisibleChange | Called when dropdown open | function(open) | 3.0 |
| search | A callback function, can be executed when the search input changes. | function(value: string) |  |
| select | A callback function, can be executed when you select a treeNode. | function(value, node, extra) |  |
| treeExpand | A callback function, can be executed when treeNode expanded | function(expandedKeys) |  |

### Tree Methods

| Name    | Description  |
| ------- | ------------ |
| blur()  | remove focus |
| focus() | get focus    |

### TreeNode props

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

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| checkable | When Tree is checkable, set TreeNode display Checkbox or not | boolean | - |  |
| 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, should be unique in the tree | string \| number | - |  |
| selectable | can be selected | boolean | true |  |
| title | Content showed on the treeNodes | string | '---' |  |
| value | Will be treated as `treeNodeFilterProp` by default, should be unique in the tree | string | - |  |

## FAQ

### How to get parent node in onChange?

We don't provide this since performance consideration.