Documentation
Documentation Hub

BaseTreeSelect

Basic usage

The TreeSelect component is used to render a data treeview. It provides a simple way to select a node in a tree.

  • Item 1
  • Item 2
  • Item 3
    • Item 3.0
    • Item 3.1
      • Item 3.1.1
      • Item 3.1.2
        • empty
      • Item 3.1.3
    • Item 3.2
    • Item 3.3
  • Item 4
Show code

Model usage

The TreeSelect items can be made selectable. Use the v-model directive to enable item selection.

  • Item 1
  • Item 2
  • Item 3
    • Item 3.0
    • Item 3.1
      • Item 3.1.1
      • Item 3.1.2
        • empty
      • Item 3.1.3
    • Item 3.2
    • Item 3.3
  • Item 4
Show code

Async data

The TreeSelect can be used to display data from an async source. Take a look at the code example for more details about usage.

  • Item 1
    • Item 1.0
    • Item 1.1
    • Item 1.2
    • Item 1.3
    • Item 1.4
    • Item 1.5
    • Item 1.6
    • Item 1.7
    • Item 1.8
    • Item 1.9
    • Item 1.10
    • Item 1.11
    • Item 1.12
    • Item 1.13
    • Item 1.14
    • Item 1.15
    • Item 1.16
    • Item 1.17
    • Item 1.18
    • Item 1.19
    • Item 1.20
    • Item 1.21
    • Item 1.22
    • Item 1.23
    • Item 1.24
    • Item 1.25
    • Item 1.26
    • Item 1.27
    • Item 1.28
    • Item 1.29
    • Item 1.30
    • Item 1.31
    • Item 1.32
    • Item 1.33
    • Item 1.34
    • Item 1.35
    • Item 1.36
    • Item 1.37
    • Item 1.38
    • Item 1.39
    • Item 1.40
    • Item 1.41
    • Item 1.42
    • Item 1.43
    • Item 1.44
    • Item 1.45
    • Item 1.46
    • Item 1.47
    • Item 1.48
    • Item 1.49
    • Item 1.50
    • Item 1.51
    • Item 1.52
    • Item 1.53
    • Item 1.54
    • Item 1.55
    • Item 1.56
    • Item 1.57
    • Item 1.58
    • Item 1.59
    • Item 1.60
    • Item 1.61
    • Item 1.62
    • Item 1.63
    • Item 1.64
    • Item 1.65
    • Item 1.66
    • Item 1.67
    • Item 1.68
    • Item 1.69
    • Item 1.70
    • Item 1.71
    • Item 1.72
    • Item 1.73
    • Item 1.74
    • Item 1.75
    • Item 1.76
    • Item 1.77
    • Item 1.78
    • Item 1.79
    • Item 1.80
    • Item 1.81
    • Item 1.82
    • Item 1.83
    • Item 1.84
    • Item 1.85
    • Item 1.86
    • Item 1.87
    • Item 1.88
    • Item 1.89
    • Item 1.90
    • Item 1.91
    • Item 1.92
    • Item 1.93
    • Item 1.94
    • Item 1.95
    • Item 1.96
    • Item 1.97
    • Item 1.98
    • Item 1.99
  • Item 2
Show code

Change default icons

TreeSelect icons can be changed. Use the icon prop to change the icons of the TreeSelect items. Check out this example of a folder tree.

  • .app
  • src
  • app.config.ts
  • tailwind.config.cjs
Show code

Exposed methods

The TreeSelect component exposes some methods that can be used to interact with the component. Check out this example to see how to use them.

  • Item 1
  • Item 2
  • Item 3
    • Item 3.0
    • Item 3.1
      • Item 3.1.1
      • Item 3.1.2
        • empty
      • Item 3.1.3
    • Item 3.2
    • Item 3.3
  • Item 4
Show code

#<BaseTreeSelect>

ModelΒΆ

v-model
When set, the component will be in treeselect mode. Only items without children can be selected.
Show example

PropertiesΒΆ

children
The tree items
Show example
level

@internal

Show example
classes
Optional CSS classes to apply to the wrapper, label, and input elements.
Show example
i18n
Translation strings.
Show example
icons
Custom icons to use for the component.
Show example
treeline
Display a line between items of the same level.
Show example
parent

@internal

Show example

SlotsΒΆ

#pending
Show example
#pending-icon
Show example
#pending-label
Show example
#empty
Show example
#empty-icon
Show example
#empty-label
Show example
#item
Show example
#item-icon
Show example
#item-select
Show example
#item-label
Show example
#children
Show example

ExposedΒΆ

tree
The loaded tree items from the `children` prop.
Show example
loadTree
Force the component to load the tree from the `children` prop.
Show example
getChildren
Returns all nodes from a tree source
Show example
getNodeChildren
Returns the children from a node.
Show example
areAllChildSelected
Check if all sub-nodes are selected from a node.
Show example
areSomeChildSelected
Check if some sub-nodes are selected from a node.
Show example
selectAllNode
Select all sub-nodes from a node.
Show example
unselectAllNode
Unselect all leaf nodes from a node.
Show example
isUndeterminate
Is a node in undeterminate state. (some children are selected / children not loaded)
Show example
isNodeLoaded
Is a node loaded.
Show example
toggleNodeSelection
Invert the selection state from a node.
Show example
toggleChildrenSelection
Invert the selection state.
Show example
selectAllChildren
Select all nodes.
Show example
unselectAllChildren
Unselect all nodes.
Show example

Custom item with icon

TreeSelect items can be customized to show a specific icon. Take a look at this example to see how to use them.

Show code

Custom item with media

TreeSelect items can be customized to show images. Take a look at this example to see how to use them.

Show code

#<BaseTreeSelectItem>

PropertiesΒΆ

value
The items to display in the component.
Show example
level
The level in the tree of the item.
Show example
shape
The shape of the component.
Show example
toggle
Action triggered when the item is clicked.
Show example

SlotsΒΆ

#default
Show example