VEUI

VEUI on GitHub
中文

Tree

Demos

Size variants

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

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>

Item click behavior

  • 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>

Customize 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=-

Style variants.

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

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

NameTypeDescription
labelstringThe descriptive label of each node.
valuestringThe value of each node.
childrenArray<Object>=The child nodes of each node. The item type is the same as datasource items.
expandedArray[]

.sync

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

checkablebooleanfalseWhether the rows are checkable.
checkedArray[]

v-model

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

selectablebooleanfalseWhether the nodes are selectable.
selectedstring-

.sync

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

merge-checkedstringkeep-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.

ValueDescription
keep-allThe parent and child nodes will both be in the selected value.
upwardsMerge selected values as far as possible in the ancestor direction.
downwardsMerge selected values in the direction of descendants if possible.

Slots

NameDescription
item

The content of each entire node.

NameTypeDescription
labelstringThe descriptive label of current node.
valuestringThe value of current node.
childrenArray<Object>=The array of the child nodes of each node. Shares the same type with datasource items.
indexnumberThe index value of current node among its siblings.
depthnumberThe depth of current node.

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

item-labelThe label of each node. Shares the same slot props with the item slot.
item-beforeThe area before the label of each node. Shares the same slot props with the item slot.
item-afterThe area after the label of each node. Shares the same slot props with the item slot.

Events

NameDescription
click

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

NameTypeDescription
itemObjectThe node item. Shares the same type with datasource items.
parentsArray<Object>All ancestor nodes from the top level down to the clicked node. Shares the same item type with datasource items.
indexnumberThe index of the clicked node among its siblings.
depthnumberThe depth of the clicked node in the tree.
expand

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

NameTypeDescription
itemObjectThe node item. Shares the same type with datasource items.
indexnumberThe index of the expanded node among its siblings.
depthnumberThe depth of the expanded node in the tree.
collapse

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

NameTypeDescription
itemObjectThe node item. Shares the same type with datasource items.
indexnumberThe index of the collapsed node among its siblings.
depthnumberThe depth of the collapsed node in the tree.

Icons

NameDescription
expandClick to expand (currently being collapsed).
collapseClick to collapse (currently being expanded).
Edit this page on GitHubEdit
© Baidu, Inc. 2023