Tree

Demos

Item click behavior

Item click

none toggle

Expanded items

[ "infused", "brewed" ]

Infused
- Brewed
  - Drip brewed
  - Filtered
  - Pour-over
  - Immersion brewed
- French press
- Cold brew
Boiled
Espresso
Milk coffee

<template>
<article>
  <section>
    <h4>Item click</h4>
    <veui-radio-group
      v-model="mode"
      :items="modes"
    />
  </section>
  <section>
    <h4>Expanded items</h4>
    {{ expanded }}
  </section>
  <section>
    <veui-tree
      :datasource="coffees"
      :item-click="mode"
      :expanded.sync="expanded"
    />
  </section>
</article>
</template>

<script>
import { RadioGroup, Tree } from 'veui'

export default {
  components: {
    'veui-radio-group': RadioGroup,
    'veui-tree': Tree
  },
  data () {
    return {
      modes: [
        { label: 'none', value: 'none' },
        { label: 'toggle', value: 'toggle' }
      ],
      mode: 'toggle',
      expanded: ['infused', 'brewed'],
      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'
            },
            {
              label: 'Flat white',
              value: 'flat-white'
            },
            {
              label: 'Flat white',
              value: 'flat-white'
            }
          ]
        }
      ]
    }
  }
}
</script>

Customize content

Custom label

Infused
Boiled
Espresso
Milk coffee

Custom item

Infused
Boiled
Espresso
Milk coffee

<template>
<article>
  <section>
    <h4>Custom label</h4>
    <veui-tree
      :datasource="coffees"
      item-click="toggle"
    >
      <template
        slot="item-label"
        slot-scope="{ 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
        slot="item"
        slot-scope="{ children, expanded, label }"
      >
        <veui-icon
          v-if="children && children.length"
          :name="expanded ? 'minus' : 'plus'"
        />
        {{ label }}
      </template>
    </veui-tree>
  </section>
</article>
</template>

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

export default {
  components: {
    'veui-tree': Tree,
    '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'
            },
            {
              label: 'Flat white',
              value: 'flat-white'
            },
            {
              label: 'Flat white',
              value: 'flat-white'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.custom-item {
  & /deep/ .veui-tree-item {
    position: relative;
    padding-left: 24px;
  }

  & /deep/ .veui-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
  }
}
</style>

API

Props

Name Type Default Description

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.

item-click

string

'none'

The operation to be performed when the whole item is activated.

Value	Description
`toggle`	Toggles the child nodes.
`none`	Does nothing.

expanded

Array

[]

.sync

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

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.

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).