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,
    icon: 'alarm',
    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
Chat Handling JS Date
Last updated: Tue Feb 20 2018
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub