TreeSelect

The tree selector of the dropdown menu, it combines the functions of components el-tree and el-select.

Basic usage

Selector for tree structures.

Select
show checkbox:
Select

Select any level

When using the check-strictly=true attribute, any node can be checked, otherwise only leaf nodes are supported.

Select
show checkbox(only click checkbox to select):
Select
show checkbox with `check-on-click-node`:
Select

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.

Multiple Selection

Multiple selection using clicks or checkbox.

Select
show checkbox:
Select
show checkbox with `check-strictly`:
Select

Disabled Selection

Disable options using the disabled field.

Select

Filterable

Use keyword filtering or custom filtering methods. filterMethod can custom filter method for data, filterNodeMethod can custom filter method for data node.

Select
filter method:
Select
filter node method:
Select

Custom content

Contents of custom tree nodes.

Select
use render content:
Select

LazyLoad

Lazy loading of tree nodes, suitable for large data lists.

Select
2.2.26 show lazy load label:

API

Attributes

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 Methods Events Slots
tree tree tree tree
select select select select

Own Attributes

Name Description Type Default
cacheData 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 object []

Type Declarations

Show declarations
ts
type CacheOption = {
  value: string | number | boolean | object
  currentLabel: string | number
  isDisabled: boolean
}

Source

Component Style Docs

Contributors