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
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.

AttributesMethodsEventsSlots
treetreetreetree
selectselectselectselect

Own Attributes ​

NameDescriptionTypeDefault
cacheData 2.2.26The cached data of the lazy node, the structure is the same as the data, used to get the label of the unloaded dataobject[]

Type Declarations ​

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

Source ​

Component • Style • Docs

Contributors ​