docs/en-US/component/tree-select.md
The tree selector of the dropdown menu,
it combines the functions of components el-tree and el-select.
Selector for tree structures.
:::demo
tree-select/basic
:::
When using the check-strictly=true attribute, any node can be checked,
otherwise only leaf nodes are supported.
:::tip
When using show-checkbox, since check-on-click-node is false by default,
it can only be selected by checking, you can set it to true,
and then click the node to select.
:::
:::demo
tree-select/check-strictly
:::
:::warning
When using show-checkbox, since check-on-click-leaf is true by default,
last tree children's can be checked by clicking their nodes.
:::
Multiple selection using clicks or checkbox.
:::demo
tree-select/multiple
:::
Disable options using the disabled field.
:::demo
tree-select/disabled
:::
Use keyword filtering or custom filtering methods.
filterMethod can custom filter method for data,
filterNodeMethod can custom filter method for data node.
:::demo
tree-select/filterable
:::
Contents of custom tree nodes.
:::demo
tree-select/slots
:::
Lazy loading of tree nodes, suitable for large data lists.
:::demo
tree-select/lazy
:::
By default the modelValue is looking for the value key.
For a different data structure node-key must be provided to work normally.
:::tip
node-key should be unique across the whole tree.value-key have the same objective as node-key.:::
:::demo
tree-select/node-key
:::
Since this component combines the functions of components el-tree and el-select,
the original properties have not been changed, so no repetition here,
and please go to the original component to view the documentation.
| Attributes | Exposes | Events | Slots |
|---|---|---|---|
| tree | tree | tree | tree |
| select | select | select | select |
| Name | Description | Type | Default |
|---|---|---|---|
| cache-data ^(2.2.26) | The cached data of the lazy node, the structure is the same as the data, used to get the label of the unloaded data | ^[array]CacheOption[] | [] |
:::warning
Expose methods under tree and select component has been deprecated, and will be removed in ^(3.0.0), please use them under their component layer: tree and select.
:::
| Name | Description | Type |
|---|---|---|
| treeRef ^(2.11.3) | Tree component instance | TreeInstance |
| selectRef ^(2.11.3) | Select component instance | SelectInstance |
| filter ^(deprecated) | filter all tree nodes, filtered nodes will be hidden | Accept a parameter which will be used as first parameter for filter-node-method |
| updateKeyChildren ^(deprecated) | set new data to node, only works when node-key is assigned | (key, data) Accept two parameters: 1. key of node 2. new data |
| getCheckedNodes ^(deprecated) | If the node can be selected (show-checkbox is true), it returns the currently selected array of nodes | (leafOnly, includeHalfChecked) Accept two boolean type parameters: 1. default value is false. If the parameter is true, it only returns the currently selected array of sub-nodes. 2. default value is false. If the parameter is true, the return value contains halfchecked nodes |
| setCheckedNodes ^(deprecated) | set certain nodes to be checked, only works when node-key is assigned | an array of nodes to be checked |
| getCheckedKeys ^(deprecated) | If the node can be selected (show-checkbox is true), it returns the currently selected array of node's keys | (leafOnly) Accept a boolean type parameter whose default value is false. If the parameter is true, it only returns the currently selected array of sub-nodes. |
| setCheckedKeys ^(deprecated) | set certain nodes to be checked, only works when node-key is assigned | (keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean parameter. If set to true, only the checked status of leaf nodes will be set. The default value is false. |
| setChecked ^(deprecated) | set node to be checked or not, only works when node-key is assigned | (key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not. |
| getHalfCheckedNodes ^(deprecated) | If the node can be selected (show-checkbox is true), it returns the currently half selected array of nodes | — |
| getHalfCheckedKeys ^(deprecated) | If the node can be selected (show-checkbox is true), it returns the currently half selected array of node's keys | — |
| getCurrentKey ^(deprecated) | return the highlight node's key (null if no node is highlighted) | — |
| getCurrentNode ^(deprecated) | return the highlight node's data (null if no node is highlighted) | — |
| setCurrentKey ^(deprecated) | set highlighted node by key, only works when node-key is assigned | (key, shouldAutoExpandParent=true) 1. the node's key to be highlighted. If null, cancel the currently highlighted node 2. whether to automatically expand parent node |
| setCurrentNode ^(deprecated) | set highlighted node, only works when node-key is assigned | (node, shouldAutoExpandParent=true) 1. the node to be highlighted 2. whether to automatically expand parent node |
| getNode ^(deprecated) | get node by data or key | (data) the node's data or key |
| remove ^(deprecated) | remove a node, only works when node-key is assigned | (data) the node's data or node to be deleted |
| append ^(deprecated) | append a child node to a given node in the tree | (data, parentNode) 1. child node's data to be appended 2. parent node's data, key or node |
| insertBefore ^(deprecated) | insert a node before a given node in the tree | (data, refNode) 1. node's data to be inserted 2. reference node's data, key or node |
| insertAfter ^(deprecated) | insert a node after a given node in the tree | (data, refNode) 1. node's data to be inserted 2. reference node's data, key or node |
| focus ^(deprecated) | focus the Input component | ^[Function]() => void |
| blur ^(deprecated) | blur the Input component, and hide the dropdown | ^[Function]() => void |
| selectedLabel ^(2.8.5) ^(deprecated) | get the currently selected label | ^[object]ComputedRef<string | string[]> |
type CacheOption = {
value: string | number | boolean | object
currentLabel: string | number
isDisabled: boolean
}