Tree

Quasar Tree represents a highly configurable component that displays hierarchical data, such as a table of contents in a tree structure.

Installation


// quasar.conf.js

return {
  framework: {
    // not needed if using auto-import feature:
    components: [
      'QTree'
    ]
  }
}

Usage

Basic



Dark



Integrated example

With QSplitter and QTabPanels



More info: QSplitter, QTabPanels.

Customize content

Notice (in the example below) the default header and body slot customization.

Default header and body slots



Notice (in the example below) the custom header and body slots.

Customizing nodes



WARNING

Clicking or pressing SPACE or 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.

Accordion mode



Filtering nodes



Selectable nodes



Lazy loading

Lazy loading nodes



Selection vs ticking, expansion

  • Selection (through QTree selected prop) refers to the currently selected node (gets highlighted with different background).
  • Ticking (through QTree ticked prop) refers to the checkbox associated with each node.
  • Expansion (through QTree expanded prop) 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 (v-bind:<prop_name>.sync or :<prop_name>.sync).

Syncing node properties



Tick strategy

There are three ticking strategy: ‘leaf’, ‘leaf-filtered’, ‘strict’ with an additional (and default) ‘none’ which disables ticking.

StrategyDescription
leafTicked 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-filteredSame concept as leaf, only that this strategy applies only to filtered nodes (the nodes that remain visible after filtering).
strictTicked 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 nodes model.

Tick strategy



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 ‘(*)’:

Custom filter



QTree API

Nodes model structure

The following describes a node’s properties that are taken into account by QTree’s v-model.

Node PropertyTypeBehavior when not presentDescription
<nodeKey>String, NumberAn error is generatedNode’s key. The key is picked from the key specified in nodeKey property.
labelStringThe item has no labelNode’s label. When labelKey prop is set the label is picked from that key.
iconStringThe default icon is usedNode’s icon.
iconColorStringThe inherited color is usedNode’s icon color. One from Quasar Color Palette.
imgStringNo image is displayedNode’s image. Use statics folder. Example: ‘statics/mountains.png’
avatarStringNo avatar is displayedNode’s avatar. Use statics folder. Example: ‘statics/boy-avatar.png’
childrenArrayThis node has no sub-nodesArray of nodes as children.
disabledBooleanThe node is enabledIs node disabled?
expandableBooleanThe node is expandableIs node expandable?
selectableBooleanThe node is selectableIs node selectable?
handlerFunctionNo extra function is calledCustom function that should be called on click on node. Receives node as parameter.
tickableBooleanThe node is tickable according to tick strategyWhen using a tick strategy, each node shows a checkbox. Should a node’s checkbox be disabled?
noTickBooleanNode displays a checkboxWhen using a tick strategy, should node display a checkbox?
tickStrategyStringTick strategy ‘none’ is usedOverride global tick strategy for this node only. One of ‘leaf’, ‘leaf-filtered’, ‘strict’, ‘none’.
lazyBooleanChildren are not lazy loadedShould children be lazy loaded? In this case also don’t specify ‘children’ prop.
headerStringSlot ‘default-header’ is usedNode header scoped slot name, without the required ‘header-’ prefix. Example: ‘story’ refers to ‘header-story’ scoped slot.
bodyStringSlot ‘default-body’ is usedNode body scoped slot name, without the required ‘body-’ prefix. Example: ‘story’ refers to ‘body-story’ scoped slot.