Vuetify — Treeview Customizations

Image for post
Image for post
Photo by Sean Brown 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.

Shaped

We can make a treeview with rounded borders on one side of the nodes.

For instance, we can write:

<template>
<v-treeview :items="items" shaped hoverable activatable></v-treeview>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: [
{
id: 1,
name: "Applications",
children: [
{ id: 2, name: "Calendar" },
{ id: 3, name: "Chrome" },
],
},
{
id: 5,
name: "Framework",
children: [
{
id: 6,
name: "vuetify",
children: [
{
id: 7,
name: "src",
children: [
{ id: 8, name: "index" },
{ id: 9, name: "bootstrap" },
],
},
],
},
{
id: 10,
name: "material",
children: [
{
id: 11,
name: "src",
children: [
{ id: 12, name: "v-btn" },
{ id: 13, name: "v-card" },
],
},
],
},
],
},
],
}),
};
</script>

Then the corners will be rounded on the right side.

Rounded

The treeview nodes can be made rounded with the rounded prop:

<template>
<v-treeview :items="items" rounded hoverable activatable></v-treeview>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: [
{
id: 1,
name: "Applications",
children: [
{ id: 2, name: "Calendar" },
{ id: 3, name: "Chrome" },
],
},
{
id: 5,
name: "Framework",
children: [
{
id: 6,
name: "vuetify",
children: [
{
id: 7,
name: "src",
children: [
{ id: 8, name: "index" },
{ id: 9, name: "bootstrap" },
],
},
],
},
{
id: 10,
name: "material",
children: [
{
id: 11,
name: "src",
children: [
{ id: 12, name: "v-btn" },
{ id: 13, name: "v-card" },
],
},
],
},
],
},
],
}),
};
</script>

Disabling Nodes

We can disable nodes with the item-disabled prop.

The value of the prop is the property name that indicates the item is disabled.

For example, we can write:

<template>
<v-treeview :items="items" selectable item-disabled="locked"></v-treeview>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: [
{
id: 1,
name: "Applications",
children: [
{ id: 2, name: "Calendar" },
{ id: 3, name: "Chrome", locked: true },
],
},
{
id: 5,
name: "Framework",
locked: true,
children: [
{
id: 6,
name: "vuetify",
children: [
{
id: 7,
name: "src",
children: [
{ id: 8, name: "index" },
{ id: 9, name: "bootstrap", locked: true },
],
},
],
},
{
id: 10,
name: "material",
children: [
{
id: 11,
name: "src",
children: [
{ id: 12, name: "v-btn", locked: true },
{ id: 13, name: "v-card" },
],
},
],
},
],
},
],
}),
};
</script>

to make the locked property disable items on the treeview.

Conclusion

We can change the shape of a treeview and disable items with Vuetify.

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