Vuetify — Treeview Selections

Image for post
Image for post
Photo by Cristina Gottardi on Unsplash

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Treeview Selection Type

There 2 supported types of selection.

The default type is 'leaf' . It’ll include the leaf of the nodes when we select the parent.

The other type is 'independent' , which lets us select all nodes individually.

For example, we can write:

<template>
<v-container>
<v-select v-model="selectionType" :items="['leaf', 'independent']" label="Selection type"></v-select>
<v-row>
<v-col>
<v-treeview
v-model="selection"
:items="items"
:selection-type="selectionType"
selectable
return-object
open-all
></v-treeview>
</v-col>
<v-divider vertical></v-divider>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
selectionType: "leaf",
selection: [],
items: [
{
id: 1,
name: "Root",
children: [
{ id: 2, name: "Child 1" },
{ id: 3, name: "Child 2" },
{
id: 4,
name: "Child 3",
children: [
{ id: 5, name: "Grandchild 1" },
{ id: 6, name: "Grandchild 2" },
],
},
],
},
],
}),
};
</script>

We have a v-select to let us change the selectionType state between the 2 values.

The state is also used in the selection-type prop to let us make the treeview use the given selection type.

If we choose leaf and select the parent node, then all the descendant nodes will be selected.

If we choose independent , then only the node we clicked on will be selected.

Selectable

We can easily select treeview nodes and their children.

For example, we can write:

<template>
<v-treeview selectable :items="items"></v-treeview>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: [
{
id: 1,
name: "Root",
children: [
{ id: 2, name: "Child 1" },
{ id: 3, name: "Child 2" },
{
id: 4,
name: "Child 3",
children: [
{ id: 5, name: "Grandchild 1" },
{ id: 6, name: "Grandchild 2" },
],
},
],
},
],
}),
};
</script>

to add the selectable prop to our v-treeview to make the nodes selectable.

Activatable

The treeview nodes can be activated by clicking on them if we add the activable prop to our v-treeview :

<template>
<v-treeview activatable :items="items"></v-treeview>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: [
{
id: 1,
name: "Root",
children: [
{ id: 2, name: "Child 1" },
{ id: 3, name: "Child 2" },
{
id: 4,
name: "Child 3",
children: [
{ id: 5, name: "Grandchild 1" },
{ id: 6, name: "Grandchild 2" },
],
},
],
},
],
}),
};
</script>

Hoverable

We can make treeview nodes hoverable with the hoverable prop:

<template>
<v-treeview hoverable :items="items"></v-treeview>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: [
{
id: 1,
name: "Root",
children: [
{ id: 2, name: "Child 1" },
{ id: 3, name: "Child 2" },
{
id: 4,
name: "Child 3",
children: [
{ id: 5, name: "Grandchild 1" },
{ id: 6, name: "Grandchild 2" },
],
},
],
},
],
}),
};
</script>

Conclusion

We can make treeview nodes selectable and hoverable in various ways.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store