Documentation
Documentation Hub

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
vue

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
vue

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.

  • pending...
Show code
vue

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
vue

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
vue

#<BaseTreeSelect>

•Model

v-model
Show example
vue

•Properties

children
The tree items
Show example
vue
classes
Optional CSS classes to apply to the wrapper, label, and input elements.
Show example
vue
i18n
Translation strings.
Show example
vue
icons
Custom icons to use for the component.
Show example
vue
level

@internal

Show example
vue
parent

@internal

Show example
vue
treeline
Display a line between items of the same level.
Show example
vue

•Slots

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

•Exposed

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

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
vue

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
vue

#<BaseTreeSelectItem>

•Properties

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

•Properties (with app.config)

rounded
The radius of the component.

@since

2.0.0

Show example
vue

•Slots

#default
This slot has no inherted props
Show example
vue
#item-icon
This slot has no inherted props
Show example
vue

•Exposed

rounded
The radius of the component.
Show example
vue