TreeSelect
The tree selector of the dropdown menu, it combines the functions of components el-tree and el-select.
TIP
This component requires the <client-only></client-only> wrap when used in SSR (eg: Nuxt) and SSG (eg: VitePress).
Basic usage
Selector for tree structures.
Select any level
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.
Multiple Selection
Multiple selection using clicks or checkbox.
Disabled Selection
Disable options using the disabled field.
Filterable
Use keyword filtering or custom filtering methods. filterMethod can custom filter method for data, filterNodeMethod can custom filter method for data node.
Custom content
Contents of custom tree nodes.
LazyLoad
Lazy loading of tree nodes, suitable for large data lists.
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.
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
type CacheOption = {
value: string | number | boolean | object
currentLabel: string | number
isDisabled: boolean
}