Quasar Tree represents a highly configurable component that displays hierarchical data, such as a table of contents in a tree structure.
/* * No installation step is necessary. * It gets installed by default by @quasar/app v2+. */
No connector lines v1.5.10+
Notice (in the example below) the default header and body slot customization.
Notice (in the example below) the custom header and body slots.
Clicking or pressing
ENTER on the custom header selects the tree item (and the custom header is blurred).
If you don’t want this to happen just wrap the content of the custom header in a
<div @click.stop @keyup.13.32.stop>.
Accordion, filtering and selectable
In the example below, sibling nodes get contracted when one gets expanded.
Selection vs ticking, expansion
- Selection (through QTree
selectedprop) refers to the currently selected node (gets highlighted with different background).
- Ticking (through QTree
tickedprop) refers to the checkbox associated with each node.
- Expansion (through QTree
expandedprop) refers to the nodes that are expanded.
All properties above require to be dynamically bound using
.sync modifier in order for them to work correctly (
There are three ticking strategy: ‘leaf’, ‘leaf-filtered’, ‘strict’ with an additional (and default) ‘none’ which disables ticking.
|leaf||Ticked nodes are only the leaves. Ticking a node influences the parent’s ticked state too (parent becomes partially ticked or ticked), as well as its children (all tickable children become ticked).|
|leaf-filtered||Same concept as |
|strict||Ticked nodes are independent of parent or children tick state.|
You can apply a global tick strategy for a QTree and locally change the ticking strategy for a certain node by specifying the
tickStrategy in the
Custom filter method
You can customize the filtering method by specifying the
filter-method prop. The method below filters by input if it also has ‘(*)’:
Nodes model structure
The following describes a node’s properties that are taken into account by QTree’s v-model.
|Node Property||Type||Behavior when not present||Description|
|<nodeKey>||String, Number||An error is generated||Node’s key. The key is picked from the key specified in |
|label||String||The item has no label||Node’s label. When |
|icon||String||The default icon is used||Node’s icon.|
|iconColor||String||The inherited color is used||Node’s icon color. One from Quasar Color Palette.|
|img||String||No image is displayed||Node’s image. Use /public folder. Example: ‘mountains.png’|
|avatar||String||No avatar is displayed||Node’s avatar. Use /public folder. Example: ‘boy-avatar.png’|
|children||Array||This node has no sub-nodes||Array of nodes as children.|
|disabled||Boolean||The node is enabled||Is node disabled?|
|expandable||Boolean||The node is expandable||Is node expandable?|
|selectable||Boolean||The node is selectable||Is node selectable?|
|handler||Function||No extra function is called||Custom function that should be called on click on node. Receives |
|tickable||Boolean||The node is tickable according to tick strategy||When using a tick strategy, each node shows a checkbox. Should a node’s checkbox be disabled?|
|noTick||Boolean||Node displays a checkbox||When using a tick strategy, should node display a checkbox?|
|tickStrategy||String||Tick strategy ‘none’ is used||Override global tick strategy for this node only. One of ‘leaf’, ‘leaf-filtered’, ‘strict’, ‘none’.|
|lazy||Boolean||Children are not lazy loaded||Should children be lazy loaded? In this case also don’t specify ‘children’ prop.|
|header||String||Slot ‘default-header’ is used||Node header scoped slot name, without the required ‘header-’ prefix. Example: ‘story’ refers to ‘header-story’ scoped slot.|
|body||String||Slot ‘default-body’ is used||Node body scoped slot name, without the required ‘body-’ prefix. Example: ‘story’ refers to ‘body-story’ scoped slot.|