VEUI

VEUI on GitHub
Play!中文

Tree

Examples

Size variants

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

Normal size

  • Infused

Small size

  • Infused
Edit this demo on GitHubEdit
<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

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

Expanded items

[ "infused", "brewed" ]

Checked items

[]

Selected item

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

NameTypeDefaultDescription
uistring-

Preset style.

ValueDescription
sSmall size.
mMedium size.
datasourceArray<Object>[]

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

NameTypeDescription
labelstringThe text description of the node.
valuestringThe value corresponding to the node.
disabledbooleanWhether the node is disabled.
childrenArray<Object>An array of child nodes for the node. The item type is the same as the item type in the datasource array.
expandedArray[]

.sync

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

checkablebooleanfalseWhether child nodes can be checked.
checkedArray[]

v-model

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

selectablebooleanfalseWhether the node is selected when the entire node area is clicked.
selectedstring-

.sync

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

merge-checkedstringkeep-all

The strategy for merging checked values.

ValueDescription
keep-allBoth parent and child nodes are included in the checked values.
upwardsMerge checked values upward as much as possible towards ancestors.
downwardsMerge checked values downward as much as possible towards descendants.
include-indeterminatebooleanfalseWhether 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

NameDescription
item

The entire content area of each node.

NameTypeDescription
labelstringThe text description of the node.
valuestringThe value corresponding to the node.
disabledbooleanWhether the node is disabled.
childrenArray<Object>An array of child nodes for the node. The item type is the same as the item type in the datasource array.
indexnumberThe index of the current data node in the hierarchy of the parent node.
depthnumberThe 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-labelThe text area of each node. The slot props are the same as the item slot.
item-beforeThe area before the text of each node. The slot props are the same as the item slot.
item-afterThe area after the text of each node. The slot props are the same as the item slot.

Events

NameDescription
click

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

NameTypeDescription
itemObjectThe node data. The type of the array items is the same as the datasource property.
parentsArray<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.
indexnumberThe index of the current node in its own level.
depthnumberThe depth of the current node in the tree hierarchy.
expand

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

NameTypeDescription
itemObjectThe node data. The type of the array items is the same as the datasource property.
indexnumberThe index of the current node in its own level.
depthnumberThe 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).

NameTypeDescription
itemObjectThe node data. The type of the array items is the same as the datasource property.
indexnumberThe index of the current node in its own level.
depthnumberThe 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

NameDescription
expandThe icon for the collapsed state, which expands when clicked.
collapseThe icon for the expanded state, which collapses when clicked.
Edit this page on GitHubEdit
© Baidu, Inc. 2024