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 codeHide code
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 codeHide code
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 codeHide code
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 codeHide code
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 codeHide code
children
Show exampleHide example
classes
Show exampleHide example
i18n
Show exampleHide example
icons
Show exampleHide example
level
@internal
Show exampleHide example
parent
@internal
Show exampleHide example
treeline
Show exampleHide example
#pending
Show exampleHide example
#pending-icon
Show exampleHide example
#pending-label
Show exampleHide example
#empty
Show exampleHide example
#empty-icon
Show exampleHide example
#empty-label
Show exampleHide example
#item
Show exampleHide example
#item-icon
Show exampleHide example
#item-select
Show exampleHide example
#item-label
Show exampleHide example
#children
Show exampleHide example
tree
Show exampleHide example
loadTree
Show exampleHide example
getChildren
Show exampleHide example
getNodeChildren
Show exampleHide example
areAllChildSelected
Show exampleHide example
areSomeChildSelected
Show exampleHide example
selectAllNode
Show exampleHide example
unselectAllNode
Show exampleHide example
isUndeterminate
Show exampleHide example
isNodeLoaded
Show exampleHide example
toggleNodeSelection
Show exampleHide example
toggleChildrenSelection
Show exampleHide example
selectAllChildren
Show exampleHide example
unselectAllChildren
Show exampleHide example
TreeSelect items can be customized to show a specific icon. Take a look at this example to see how to use them.
Show codeHide code
TreeSelect items can be customized to show images. Take a look at this example to see how to use them.
Show codeHide code
level
Show exampleHide example
toggle
Show exampleHide example
value
Show exampleHide example
rounded
@since
2.0.0