Tree

Examples

Size variants

Available size variants for the ui prop: m / s.

Normal size

Infused

Small size

Infused

<template>
<article>
  <section>
    <h4>Normal size</h4>
    <veui-tree
      ui="m"
      :datasource="datasource"
    />
  </section>
  <section>
    <h4>Small size</h4>
    <veui-tree
      ui="s"
      :datasource="datasource"
    />
  </section>
</article>
</template>

<script>
import { Tree } from 'veui'

export default {
  components: {
    'veui-tree': Tree
  },
  data () {
    return {
      datasource: [
        {
          label: 'Infused',
          value: 'infused',
          children: [
            {
              label: 'Brewed',
              value: 'brewed',
              children: [
                {
                  label: 'Drip brewed',
                  value: 'drip-brewed'
                },
                {
                  label: 'Filtered',
                  value: 'filtered'
                },
                {
                  label: 'Pour-over',
                  value: 'pour-over'
                },
                {
                  label: 'Immersion brewed',
                  value: 'immersion-brewed'
                }
              ]
            },
            {
              label: 'French press',
              value: 'french-press'
            },
            {
              label: 'Cold brew',
              value: 'cold-brew'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
article {
  display: flex;
}

section {
  width: 45%;
}
</style>

Expanded and selected

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-tree
      v-model="checked"
      :datasource="coffees"
      :expanded.sync="expanded"
      checkable
      selectable
      :selected.sync="selected"
    />
  </section>
  <section>
    <h4>Expanded items</h4>
    {{ expanded }}
    <h4>Checked items</h4>
    {{ checked }}
    <h4>Selected item</h4>
    {{ selected }}
  </section>
</article>
</template>

<script>
import { Tree } from 'veui'

export default {
  components: {
    'veui-tree': Tree
  },
  data () {
    return {
      expanded: ['infused', 'brewed'],
      checked: [],
      selected: null,
      coffees: [
        {
          label: 'Infused',
          value: 'infused',
          children: [
            {
              label: 'Brewed',
              value: 'brewed',
              children: [
                {
                  label: 'Drip brewed',
                  value: 'drip-brewed'
                },
                {
                  label: 'Filtered',
                  value: 'filtered',
                  disabled: true
                },
                {
                  label: 'Pour-over',
                  value: 'pour-over'
                },
                {
                  label: 'Immersion brewed',
                  value: 'immersion-brewed'
                }
              ]
            },
            {
              label: 'French press',
              value: 'french-press'
            },
            {
              label: 'Cold brew',
              value: 'cold-brew'
            }
          ]
        },
        {
          label: 'Boiled',
          value: 'boiled',
          disabled: true,
          children: [
            {
              label: 'Percolated',
              value: 'percolated'
            },
            {
              label: 'Turkish',
              value: 'turkish'
            },
            {
              label: 'Moka',
              value: 'moka'
            }
          ]
        },
        {
          label: 'Espresso',
          value: 'espresso',
          children: [
            {
              label: 'Caffè Americano',
              value: 'caffe-americano'
            },
            {
              label: 'Cafe Lungo',
              value: 'cafe-lungo',
              disabled: true
            },
            {
              label: 'Café Cubano',
              value: 'cafe-cubano'
            },
            {
              label: 'Caffè crema',
              value: 'caffe-crema'
            },
            {
              label: 'Cafe Zorro',
              value: 'cafe-zorro'
            },
            {
              label: 'Doppio',
              value: 'doppio'
            },
            {
              label: 'Espresso Romano',
              value: 'espresso-romano'
            },
            {
              label: 'Guillermo',
              value: 'guillermo'
            },
            {
              label: 'Ristretto',
              value: 'ristretto'
            }
          ]
        },
        {
          label: 'Milk coffee',
          value: 'milk-coffee',
          children: [
            {
              label: 'Flat white',
              value: 'flat-white'
            },
            {
              label: 'Latte',
              value: 'latte'
            },
            {
              label: 'Macchiato',
              value: 'macchiato'
            },
            {
              label: 'Cappuccino',
              value: 'cappuccino'
            },
            {
              label: 'White coffee',
              value: 'white-coffee'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
article {
  display: flex;
}

h4 {
  margin: 0;
}
h4 + h4 {
  margin-top: 20px;
}

section {
  width: 45%;
}
</style>

Custom content

Custom label

Infused
Boiled
Espresso
Milk coffee

Custom item

Infused
Boiled
Espresso
Milk coffee

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <h4>Custom label</h4>
    <veui-tree
      :datasource="coffees"
      item-click="toggle"
    >
      <template #item-label="{ item }">
        <i>{{ item.label }}</i>
      </template>
    </veui-tree>
  </section>
  <section>
    <h4>Custom item</h4>
    <veui-tree
      :datasource="coffees"
      item-click="toggle"
      class="custom-item"
    >
      <template #item="{ children, expanded, label }">
        <template v-if="children && children.length">
          <veui-button
            ui="aux icon"
            class="custom-toggle"
          >
            <veui-icon :name="expanded ? 'minus' : 'plus'"/>
          </veui-button>
          {{ label }}
        </template>
      </template>
    </veui-tree>
  </section>
</article>
</template>

<script>
import { Tree, Button, Icon } from 'veui'
import 'veui-theme-dls-icons/plus'
import 'veui-theme-dls-icons/minus'

export default {
  components: {
    'veui-tree': Tree,
    'veui-button': Button,
    'veui-icon': Icon
  },
  data () {
    return {
      coffees: [
        {
          label: 'Infused',
          value: 'infused',
          children: [
            {
              label: 'Brewed',
              value: 'brewed',
              children: [
                {
                  label: 'Drip brewed',
                  value: 'drip-brewed'
                },
                {
                  label: 'Filtered',
                  value: 'filtered'
                },
                {
                  label: 'Pour-over',
                  value: 'pour-over'
                },
                {
                  label: 'Immersion brewed',
                  value: 'immersion-brewed'
                }
              ]
            },
            {
              label: 'French press',
              value: 'french-press'
            },
            {
              label: 'Cold brew',
              value: 'cold-brew'
            }
          ]
        },
        {
          label: 'Boiled',
          value: 'boiled',
          children: [
            {
              label: 'Percolated',
              value: 'percolated'
            },
            {
              label: 'Turkish',
              value: 'turkish'
            },
            {
              label: 'Moka',
              value: 'moka'
            }
          ]
        },
        {
          label: 'Espresso',
          value: 'espresso',
          children: [
            {
              label: 'Caffè Americano',
              value: 'caffe-americano'
            },
            {
              label: 'Cafe Lungo',
              value: 'cafe-lungo'
            },
            {
              label: 'Café Cubano',
              value: 'cafe-cubano'
            },
            {
              label: 'Caffè crema',
              value: 'caffe-crema'
            },
            {
              label: 'Cafe Zorro',
              value: 'cafe-zorro'
            },
            {
              label: 'Doppio',
              value: 'doppio'
            },
            {
              label: 'Espresso Romano',
              value: 'espresso-romano'
            },
            {
              label: 'Guillermo',
              value: 'guillermo'
            },
            {
              label: 'Ristretto',
              value: 'ristretto'
            }
          ]
        },
        {
          label: 'Milk coffee',
          value: 'milk-coffee',
          children: [
            {
              label: 'Flat white',
              value: 'flat-white'
            },
            {
              label: 'Latte',
              value: 'latte'
            },
            {
              label: 'Macchiato',
              value: 'macchiato'
            },
            {
              label: 'Cappuccino',
              value: 'cappuccino'
            },
            {
              label: 'White coffee',
              value: 'white-coffee'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
article {
  display: flex;
}

h4 {
  margin-top: 0;
}

section {
  width: 45%;
}

.custom-toggle {
  margin-right: 4px;
}
</style>

API

Props

Name Type Default Description

ui

string

Preset style.

Value	Description
`s`	Small size.
`m`	Medium size.

datasource

Array<Object>

[]

An array of data sources, each item in the array has the following properties: {label, value, disabled, children, ...}.

Name	Type	Description
`label`	`string`	The text description of the node.
`value`	`string`	The value corresponding to the node.
`disabled`	`boolean`	Whether the node is disabled.
`children`	`Array<Object>`	An array of child nodes for the node. The item type is the same as the item type in the `datasource` array.

expanded

Array

[]

.sync

Specifies the currently expanded nodes, which is an array of the value property of nodes in the datasource array.

checkable boolean false Whether child nodes can be checked.

checked

Array

[]

v-model

The values of currently checked leaf nodes, which is an array of the value property of nodes in the datasource array.

selectable boolean false Whether the node is selected when the entire node area is clicked.

selected

string

.sync

The values of currently selected leaf nodes, which is an array of the value property of nodes in the datasource array.

merge-checked

string

keep-all

The strategy for merging checked values.

Value	Description
`keep-all`	Both parent and child nodes are included in the checked values.
`upwards`	Merge checked values upward as much as possible towards ancestors.
`downwards`	Merge checked values downward as much as possible towards descendants.

include-indeterminate boolean false Whether to include nodes in an indeterminate state in the selected nodes. If a non-leaf node in the datasource has some of its descendant nodes selected, it is in an indeterminate state.

Slots

Name Description

item

The entire content area of each node.

Name	Type	Description
`label`	`string`	The text description of the node.
`value`	`string`	The value corresponding to the node.
`disabled`	`boolean`	Whether the node is disabled.
`children`	`Array<Object>`	An array of child nodes for the node. The item type is the same as the item type in the `datasource` array.
`index`	`number`	The index of the current data node in the hierarchy of the parent node.
`depth`	`number`	The depth of the current data node in the tree.

In addition, any properties in the data item in datasource other than the properties described above will also be automatically bound to slot props through v-bind.

item-label The text area of each node. The slot props are the same as the item slot.

item-before The area before the text of each node. The slot props are the same as the item slot.

item-after The area after the text of each node. The slot props are the same as the item slot.

Events

Name Description

click

Fired when a node is clicked. Callback parameter: (item, parents, index, depth).

Name	Type	Description
`item`	`Object`	The node data. The type of the array items is the same as the `datasource` property.
`parents`	`Array<Object>`	The path from the root node to the current node's parent node. The type of the array items is the same as the `datasource` property.
`index`	`number`	The index of the current node in its own level.
`depth`	`number`	The depth of the current node in the tree hierarchy.

expand

Fired when a node is expanded. Callback parameter: (item, index, depth).

Name	Type	Description
`item`	`Object`	The node data. The type of the array items is the same as the `datasource` property.
`index`	`number`	The index of the current node in its own level.
`depth`	`number`	The depth of the current node in the tree hierarchy.

collapse

Fired when the collapse icon or the entire node is clicked. Determined by the item-click prop. Callback parameter: (item, index, depth).

Name	Type	Description
`item`	`Object`	The node data. The type of the array items is the same as the `datasource` property.
`index`	`number`	The index of the current node in its own level.
`depth`	`number`	The depth of the current node in the tree hierarchy.

check

v-model

Fired when the check state changes. Callback parameter: (value: Array). The value is an array consisting of the value field of the currently checked leaf nodes (affected by the keys prop).

Icons

Name	Description
`expand`	The icon for the collapsed state, which expands when clicked.
`collapse`	The icon for the expanded state, which collapses when clicked.

Edit this page on GitHubEdit