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.
