Tree

Demos

Size variants

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

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>

Item click behavior

Edit this page 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>

Customize content

Custom label

Infused
Boiled
Espresso
Milk coffee

Custom item

Infused
Boiled
Espresso
Milk coffee

Edit this page 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=

Style variants.

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

datasource

Array<Object>

[]

The datasource of the tree. The type of node item is {label, value, children, ...}.

Name	Type	Description
`label`	`string`	The descriptive label of each node.
`value`	`string`	The value of each node.
`children`	`Array<Object>=`	The child nodes of each node. The item type is the same as `datasource` items.

expanded

Array

[]

.sync

An array consists of the value from datasource items that denotes the expanded nodes.

checkable boolean false Whether the rows are checkable.

checked

Array

[]

v-model

An array consists of the value from datasource items that denotes the checked nodes.

selectable boolean false Whether the nodes are selectable.

selected

string

.sync

An array consists of the value from datasource items that denotes the selected nodes.

merge-checked

string

keep-all

Merge strategy for selected values. When all child nodes under a node are selected, you can choose to keep only the parent node, only the child nodes, or both.

Value	Description
`keep-all`	The parent and child nodes will both be in the selected value.
`upwards`	Merge selected values as far as possible in the ancestor direction.
`downwards`	Merge selected values in the direction of descendants if possible.

Slots

Name Description

item

The content of each entire node.

Name	Type	Description
`label`	`string`	The descriptive label of current node.
`value`	`string`	The value of current node.
`children`	`Array<Object>=`	The array of the child nodes of each node. Shares the same type with `datasource` items.
`index`	`number`	The index value of current node among its siblings.
`depth`	`number`	The depth of current node.

Additionally, custom properties apart from the listed ones will also be passes into the scope object via v-bind.

item-label The label of each node. Shares the same scope properties with the item slot.

item-before The area before the label of each node. Shares the same scope properties with the item slot.

item-after The area after the label of each node. Shares the same scope properties with the item slot.

Events

Name Description

click

Triggered when the node is clicked. The callback parameter list is (item, parents, index, depth).

Name	Type	Description
`item`	`Object`	The node item. Shares the same type with `datasource` items.
`parents`	`Array<Object>`	All ancestor nodes from the top level down to the clicked node. Shares the same item type with `datasource` items.
`index`	`number`	The index of the clicked node among its siblings.
`depth`	`number`	The depth of the clicked node in the tree.

expand

Triggered when the node is expanded. The callback parameter list is (item, index, depth).

Name	Type	Description
`item`	`Object`	The node item. Shares the same type with `datasource` items.
`index`	`number`	The index of the expanded node among its siblings.
`depth`	`number`	The depth of the expanded node in the tree.

collapse

Triggered when the node is collapsed. The callback parameter list is (item, index, depth).

Name	Type	Description
`item`	`Object`	The node item. Shares the same type with `datasource` items.
`index`	`number`	The index of the collapsed node among its siblings.
`depth`	`number`	The depth of the collapsed node in the tree.

Icons

Name	Description
`expand`	Click to expand (currently being collapsed).
`collapse`	Click to collapse (currently being expanded).

Edit this page on GitHubEdit