Tree     

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

Trees are stripped out of any design by default so you can
easily stylize and turn them into anything you want.

Basic Usage

<q-tree
:model="treeModel"
contract-html="<i class='material-icons'>remove_circle</i>"
expand-html="<i class='material-icons'>add_circle</i>"
></q-tree>

Tree model structure

treeModel: [
{
title: 'Item 1',
expanded: true,
children: [
{
title: 'Item 1.1',
expanded: false,
children: [
{
title: 'Item 1.1.1',
expanded: false,
children: [
{
title: 'Item 1.1.1.1',
expanded: false,
children: []
}
]
},
{
title: 'Item 1.1.2',
expanded: false,
handler () { console.log('Tapped on Item 1.1.2') },
children: []
}
]
},
{
title: 'Item 1.2',
expanded: false,
children: []
}
]
},
{
title: 'Item 2',
expanded: false,
children: []
}
]

Handler Method

Items containing a handler method will make those items trigger the handler method when clicked/tapped.
The handler is passed the item as an argument.

Vue Properties

Vue PropertyDescription
modelVue model for the Tree
contract-htmlHTML to display at the end of each item; when user clicks on it its branch contracts
expand-htmlHTML to display at the end of each item; when user clicks on it its branch expands