Tree view
Vue Bootstrap 5 Tree view plugin
MDB treeview plugin is used to show hierarchical information which starts from the root item and proceed to its children and their respective children. Each item besides the root has a parent and can have children.
The parent is the node which is higher in the hierarchy and the child the one that is lower. Siblings are items which have one and the same parent. Items can be expanded and collapsed.
Note: Read the API tab to find all available options and advanced customization
Basic example - DOM
Initialize tree view structure with
MDBTreeview component. If you want to nest your lists -
wrap a text of a li tag in a tag and define
other ul after it. Add .show class to the
list that you want to expand from the beginning.
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
-
Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
-
Third-three
- Fourth-one
- Fourth-two
- Fourth-three
-
Third-one
<template>
<MDBTreeview>
<ul>
<li>One</li>
<li>Two</li>
<li>
<a>Three</a>
<ul class="show">
<li>Second-one</li>
<li>Second-two</li>
<li>
<a>Second-three</a>
<ul>
<li>
<a>Third-one</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</MDBTreeview>
</template>
<script>
import { MDBTreeview } from "mdb-vue-tree-view";
export default {
components: {
MDBTreeview
}
};
</script>
<script setup lang="ts">
import { MDBTreeview } from "mdb-vue-tree-view";
</script>
Basic example - JavaScript
You can define whole structure of tree using only JavaScript. There are some props in data that you can use to customize it:
name- defines a text for an itemchildren- defines a nested list and it's childrenicon- defines a custom expanding icon for the nested listshow- defines if list expands from the beginning or notdisabled- defines if list item is disabled or not
<template>
<MDBTreeview
:structure="[
{ name: 'One' },
{ name: 'Two' },
{
name: 'Three',
children: [
{ name: 'Second-one' },
{ name: 'Second-two' },
{
name: 'Second-three',
children: [
{
name: 'Third-one',
children: [
{ name: 'Fourth-one' },
{ name: 'Fourth-two' },
{ name: 'Fourth-three' },
],
},
{ name: 'Third-two' },
{
name: 'Third-three',
children: [
{ name: 'Fourth-one' },
{ name: 'Fourth-two' },
{ name: 'Fourth-three' },
],
},
],
},
],
},
]"
/>
</template>
<script>
import { MDBTreeview } from "mdb-vue-tree-view";
export default {
components: {
MDBTreeview
}
};
</script>
<script setup lang="ts">
import { MDBTreeview } from "mdb-vue-tree-view";
</script>
Open on item click
Use a openOnClick property to define opening lists of
treeview by click only on the arrow or on the whole list item.
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
-
Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
-
Third-three
- Fourth-one
- Fourth-two
- Fourth-three
-
Third-one
<template>
<MDBTreeview :openOnClick="false">
<ul>
<li>One</li>
<li>Two</li>
<li>
<a>Three</a>
<ul class="show">
<li>Second-one</li>
<li>Second-two</li>
<li>
<a>Second-three</a>
<ul>
<li>
<a>Third-one</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</MDBTreeview>
</template>
<script>
import { MDBTreeview } from "mdb-vue-tree-view";
export default {
components: {
MDBTreeview
}
};
</script>
<script setup lang="ts">
import { MDBTreeview } from "mdb-vue-tree-view";
</script>
Accordion
Use a accordion property to enable or disable opening
only one list at the same level.
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
-
Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
-
Third-three
- Fourth-one
- Fourth-two
- Fourth-three
-
Third-one
<template>
<MDBTreeview accordion>
<ul>
<li>One</li>
<li>Two</li>
<li>
<a>Three</a>
<ul class="show">
<li>Second-one</li>
<li>Second-two</li>
<li>
<a>Second-three</a>
<ul>
<li>
<a>Third-one</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</MDBTreeview>
</template>
<script>
import { MDBTreeview } from "mdb-vue-tree-view";
export default {
components: {
MDBTreeview
}
};
</script>
<script setup lang="ts">
import { MDBTreeview } from "mdb-vue-tree-view";
</script>
Selectable
Use a selectable property to set up checkboxes in every
list item.
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
-
Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
-
Third-three
- Fourth-one
- Fourth-two
- Fourth-three
-
Third-one
<template>
<MDBTreeview selectable>
<ul>
<li>One</li>
<li>Two</li>
<li>
<a>Three</a>
<ul class="show">
<li>Second-one</li>
<li>Second-two</li>
<li>
<a>Second-three</a>
<ul>
<li>
<a>Third-one</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</MDBTreeview>
</template>
<script>
import { MDBTreeview } from "mdb-vue-tree-view";
export default {
components: {
MDBTreeview
}
};
</script>
<script setup lang="ts">
import { MDBTreeview } from "mdb-vue-tree-view";
</script>
Expand
Expand your treeview to the particular list using the
expand(ID) method.
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
-
Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
-
Third-three
- Fourth-one
- Fourth-two
- Fourth-three
-
Third-one
<template>
<MDBRow class="justify-content-center mb-3">
<MDBCol md="3">
<MDBBtn
color="primary"
@click="expandExample?.expand('expand-example-item')"
>
Expand first list
</MDBBtn>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBTreeview ref="expandExample">
<ul>
<li>One</li>
<li>Two</li>
<li>
<a>Three</a>
<ul id="expand-example-item">
<li>Second-one</li>
<li>Second-two</li>
<li>
<a>Second-three</a>
<ul>
<li>
<a>Third-one</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</MDBTreeview>
</MDBRow>
</template>
<script>
import { MDBTreeview } from "mdb-vue-tree-view";
import { MDBBtn, MDBCol, MDBRow } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBTreeview,
MDBBtn,
MDBCol,
MDBRow
},
setup() {
const expandExample = ref(null);
return {
expandExample,
}
}
};
</script>
<script setup lang="ts">
import { MDBTreeview } from "mdb-vue-tree-view";
import { MDBBtn, MDBCol, MDBRow } from "mdb-vue-ui-kit";
import { ref } from "vue";
const expandExample = ref<InstanceType<typeof MDBTreeview> | null>(null);
</script>
Collapse
Collapse your treeview using the collapse() method.
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
-
Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
-
Third-three
- Fourth-one
- Fourth-two
- Fourth-three
-
Third-one
<template>
<MDBRow class="justify-content-center mb-3">
<MDBCol md="3">
<MDBBtn color="primary" @click="collapseExample?.collapse()">
Collapse treeview
</MDBBtn>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBTreeview class="treeview" ref="collapseExample">
<ul>
<li>One</li>
<li>Two</li>
<li>
<a>Three</a>
<ul class="show">
<li>Second-one</li>
<li>Second-two</li>
<li>
<a>Second-three</a>
<ul class="show">
<li>
<a>Third-one</a>
<ul class="show">
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul class="show">
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</MDBTreeview>
</MDBRow>
</template>
<script>
import { MDBTreeview } from "mdb-vue-tree-view";
import { MDBBtn, MDBCol, MDBRow } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBTreeview,
MDBBtn,
MDBCol,
MDBRow
},
setup() {
const collapseExample = ref();
return {
collapseExample,
}
}
};
</script>
<script setup lang="ts">
import { MDBTreeview } from "mdb-vue-tree-view";
import { MDBBtn, MDBCol, MDBRow } from "mdb-vue-ui-kit";
import { ref } from "vue";
const collapseExample = ref<InstanceType<typeof MDBTreeview> | null>(null);
</script>
Custom icons - DOM
You can add your custom icons to your treeview. For non-nested
elements - paste code of an icon in the item. For nested elements -
declare span tag inside a element and paste
there the code for your icon.
Use a rotationAngle property to define a
rotation angle of nested lists icons.
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
- Third-one
- Third-two
- Third-three
<template>
<MDBTreeview>
<ul>
<li><i class="fas fa-dot-circle"></i> One</li>
<li><i class="fas fa-dot-circle"></i> Two</li>
<li>
<a>
<span><i class="fas fa-angle-double-right"></i></span>
Three
</a>
<ul class="show" id="custom-icon-list">
<li><i class="fas fa-dot-circle"></i> Second-one</li>
<li><i class="fas fa-dot-circle"></i> Second-two</li>
<li>
<a
><span><i class="fas fa-angle-double-right"></i></span>
Second-three</a
>
<ul>
<li><i class="fas fa-dot-circle"></i> Third-one</li>
<li><i class="fas fa-dot-circle"></i> Third-two</li>
<li><i class="fas fa-dot-circle"></i> Third-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</MDBTreeview>
</template>
<script>
import { MDBTreeview } from "mdb-vue-tree-view";
export default {
components: {
MDBTreeview
}
};
</script>
<script setup lang="ts">
import { MDBTreeview } from "mdb-vue-tree-view";
</script>
Custom icons - JavaScript
Add icons to the list elements by pasting an icon code in the
name property. If you want to change the rotatable icon
in the nested list - use icon property instead.
<template>
<MDBTreeview :structure="customIconStructure" />
</template>
<script>
import { MDBTreeview } from "mdb-vue-tree-view";
import { ref } from "vue";
export default {
components: {
MDBTreeview
},
setup() {
const customIconStructure = ref([
{ name: '<i class="fas fa-dot-circle"></i> One' },
{ name: '<i class="fas fa-dot-circle"></i> Two' },
{
name: " Three",
show: true,
icon: '<i class="fas fa-angle-double-right"></i>',
children: [
{ name: '<i class="fas fa-dot-circle"></i> Second-one' },
{ name: '<i class="fas fa-dot-circle"></i> Second-two' },
{
name: " Second-three",
icon: '<i class="fas fa-angle-double-right"></i>',
children: [
{
name: " Third-one",
icon: '<i class="fas fa-angle-double-right"></i>',
children: [
{ name: '<i class="fas fa-dot-circle"></i> Fourth-one' },
{ name: '<i class="fas fa-dot-circle"></i> Fourth-two' },
{ name: '<i class="fas fa-dot-circle"></i> Fourth-three' },
],
},
{ name: '<i class="fas fa-dot-circle"></i> Third-two' },
{
name: " Third-three",
icon: '<i class="fas fa-angle-double-right"></i>',
children: [
{ name: '<i class="fas fa-dot-circle"></i> Fourth-one' },
{ name: '<i class="fas fa-dot-circle"></i> Fourth-two' },
{ name: '<i class="fas fa-dot-circle"></i> Fourth-three' },
],
},
],
},
],
},
]);
return {
customIconStructure
}
}
};
</script>
<script setup lang="ts">
import { MDBTreeview } from "mdb-vue-tree-view";
import { ref } from "vue";
const customIconStructure = ref([
{ name: '<i class="fas fa-dot-circle"></i> One' },
{ name: '<i class="fas fa-dot-circle"></i> Two' },
{
name: " Three",
show: true,
icon: '<i class="fas fa-angle-double-right"></i>',
children: [
{ name: '<i class="fas fa-dot-circle"></i> Second-one' },
{ name: '<i class="fas fa-dot-circle"></i> Second-two' },
{
name: " Second-three",
icon: '<i class="fas fa-angle-double-right"></i>',
children: [
{
name: " Third-one",
icon: '<i class="fas fa-angle-double-right"></i>',
children: [
{ name: '<i class="fas fa-dot-circle"></i> Fourth-one' },
{ name: '<i class="fas fa-dot-circle"></i> Fourth-two' },
{ name: '<i class="fas fa-dot-circle"></i> Fourth-three' },
],
},
{ name: '<i class="fas fa-dot-circle"></i> Third-two' },
{
name: " Third-three",
icon: '<i class="fas fa-angle-double-right"></i>',
children: [
{ name: '<i class="fas fa-dot-circle"></i> Fourth-one' },
{ name: '<i class="fas fa-dot-circle"></i> Fourth-two' },
{ name: '<i class="fas fa-dot-circle"></i> Fourth-three' },
],
},
],
},
],
},
]);
</script>
Color
Set the color of an active item using the
treeviewColor property.
Current color: primary
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
-
Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
-
Third-three
- Fourth-one
- Fourth-two
- Fourth-three
-
Third-one
<template>
<div class="text-center mb-5">
<MDBBtn color="primary" @click="treeviewColor = 'primary'">
Primary
</MDBBtn>
<MDBBtn color="secondary" @click="treeviewColor = 'secondary'">
Secondary
</MDBBtn>
<MDBBtn color="warning" @click="treeviewColor = 'warning'">
Warning
</MDBBtn>
<MDBBtn color="danger" @click="treeviewColor = 'danger'">
Danger
</MDBBtn>
<MDBBtn color="info" @click="treeviewColor = 'info'">Info</MDBBtn>
<MDBBtn color="success" @click="treeviewColor = 'success'">
Success
</MDBBtn>
<MDBBtn color="dark" @click="treeviewColor = 'dark'">Dark</MDBBtn>
</div>
<MDBRow class="text-center">
<h5>Current color: <span id="current-color">primary</span></h5>
</MDBRow>
<MDBRow class="mt-4">
<MDBTreeview :treeviewColor="treeviewColor">
<ul>
<li>One</li>
<li>Two</li>
<li>
<a>Three</a>
<ul class="show">
<li>Second-one</li>
<li>Second-two</li>
<li>
<a>Second-three</a>
<ul>
<li>
<a>Third-one</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</MDBTreeview>
</MDBRow>
</template>
<script>
import { MDBTreeview } from "mdb-vue-tree-view";
import { MDBBtn, MDBRow } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBTreeview,
MDBBtn,
MDBRow
},
setup() {
const treeviewColor = ref("primary");
return {
treeviewColor
}
}
};
</script>
<script setup lang="ts">
import { MDBTreeview } from "mdb-vue-tree-view";
import { MDBBtn, MDBRow } from "mdb-vue-ui-kit";
import { ref } from "vue";
const treeviewColor = ref<InstanceType<typeof MDBTreeview> | null>(null);
</script>
Line
Use a line property to set up an additional line in every
nested list.
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
-
Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
-
Third-three
- Fourth-one
- Fourth-two
- Fourth-three
-
Third-one
<template>
<MDBTreeview line>
<ul>
<li>One</li>
<li>Two</li>
<li>
<a>Three</a>
<ul class="show">
<li>Second-one</li>
<li>Second-two</li>
<li>
<a>Second-three</a>
<ul>
<li>
<a>Third-one</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</MDBTreeview>
</template>
<script>
import { MDBTreeview } from "mdb-vue-tree-view";
export default {
components: {
MDBTreeview
}
};
</script>
<script setup lang="ts">
import { MDBTreeview } from "mdb-vue-tree-view";
</script>
Disabled - DOM
Add .treeview-disabled class to the a (if
nested) or li tag to disable your list item. You can
expand disabled items, but you can't select them.
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
-
Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
-
Third-three
- Fourth-one
- Fourth-two
- Fourth-three
-
Third-one
<template>
<MDBTreeview selectable>
<ul>
<li>One</li>
<li class="treeview-disabled">Two</li>
<li>
<a>Three</a>
<ul class="show">
<li>Second-one</li>
<li>Second-two</li>
<li class="treeview-disabled">
<a>Second-three</a>
<ul>
<li>
<a>Third-one</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</MDBTreeview>
</template>
<script>
import { MDBTreeview } from "mdb-vue-tree-view";
export default {
components: {
MDBTreeview
}
};
</script>
<script setup lang="ts">
import { MDBTreeview } from "mdb-vue-tree-view";
</script>
Disabled - JavaScript
To generate a disabled list item, use disabled property.
<template>
<MDBTreeview :structure="disabledStructure" />
</template>
<script>
import { MDBTreeview } from "mdb-vue-tree-view";
import { ref } from "vue";
export default {
components: {
MDBTreeview
},
setup() {
const disabledStructure = ref([
{ name: "One", disabled: true },
{ name: "Two" },
{
name: " Three",
show: true,
children: [
{ name: "Second-one" },
{ name: "Second-two" },
{
name: " Second-three",
disabled: true,
children: [
{
name: " Third-one",
children: [
{ name: "Fourth-one" },
{ name: "Fourth-two" },
{ name: "Fourth-three" },
],
},
{ name: "Third-two" },
{
name: " Third-three",
children: [
{ name: "Fourth-one" },
{ name: "Fourth-two" },
{ name: "Fourth-three" },
],
},
],
},
],
},
]);
return {
disabledStructure
}
}
};
</script>
<script setup lang="ts">
import { MDBTreeview } from "mdb-vue-tree-view";
import { ref } from "vue";
const disabledStructure = ref([
{ name: "One", disabled: true },
{ name: "Two" },
{
name: " Three",
show: true,
children: [
{ name: "Second-one" },
{ name: "Second-two" },
{
name: " Second-three",
disabled: true,
children: [
{
name: " Third-one",
children: [
{ name: "Fourth-one" },
{ name: "Fourth-two" },
{ name: "Fourth-three" },
],
},
{ name: "Third-two" },
{
name: " Third-three",
children: [
{ name: "Fourth-one" },
{ name: "Fourth-two" },
{ name: "Fourth-three" },
],
},
],
},
],
},
]);
</script>
Filter
Use the .filter(string) method to expand list items that
meet your requirements.
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
-
Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
-
Third-three
- Fourth-one
- Fourth-two
- Fourth-three
-
Third-one
<template>
<MDBRow class="mb-4 justify-content-center">
<MDBCol md="6">
<MDBInput
v-model="filter"
label="Find the treeview"
@change="filterExample.filter(filter)"
/>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBTreeview ref="filterExample">
<ul>
<li>One</li>
<li>Two</li>
<li>
<a>Three</a>
<ul>
<li>Second-one</li>
<li>Second-two</li>
<li>
<a>Second-three</a>
<ul>
<li>
<a>Third-one</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
<li>Third-two</li>
<li>
<a>Third-three</a>
<ul>
<li>Fourth-one</li>
<li>Fourth-two</li>
<li>Fourth-three</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</MDBTreeview>
</MDBRow>
</template>
<script>
import { MDBTreeview } from "mdb-vue-tree-view";
import { MDBRow, MDBCol, MDBInput } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBTreeview,
MDBRow,
MDBCol,
MDBInput
},
setup() {
const filter = ref("");
const filterExample = ref("");
return {
filter,
filterExample,
}
}
};
</script>
<script setup lang="ts">
import { MDBTreeview } from "mdb-vue-tree-view";
import { MDBRow, MDBCol, MDBInput } from "mdb-vue-ui-kit";
import { ref } from "vue";
const filter = ref("");
const filterExample = ref<InstanceType<typeof MDBTreeview> | null>(null);
</script>
Tree view - API
Import
<script>
import { MDBTreeview } from "mdb-vue-tree-view";
</script>
Properties
| Name | Type | Default | Description |
|---|---|---|---|
accordion
|
Boolean | false |
Allows only one list on the same level to be opened |
line
|
Boolean | false |
Adds a line to every nested list |
openOnClick
|
Boolean | true |
Enables opening list by clicking only on the icon |
tag
|
String | 'div' |
Sets component wrapper tag |
treeviewColor
|
String | 'primary' |
Defines a text and background color for an active or hovered item |
selectable
|
Boolean | false |
Setup checkboxes for the every list item |
structure
|
Array | ` |
Setup structure of tree elements |
rotationAngle
|
Number | 90 |
Defines a rotation angle of the icons in nested lists |
Methods
| Name | Description |
|---|---|
collapse
|
Collapses every list in treeview |
expand('id')
|
Expands a treeview to the list with a particular ID |
filter(string)
|
Expands list items that meet your requirements |
<template>
<MDBBtn color="primary" @click="treeviewRef?.collapse()"
>Collapse list</MDBBtn
>
<MDBTreeview
ref="treeviewRef"
:structure="[
{ name: 'One' },
{ name: 'Two' },
{
name: 'Three',
children: [
{ name: 'Second-one' },
{ name: 'Second-two' },
{
name: 'Second-three',
children: [
{
name: 'Third-one',
children: [
{ name: 'Fourth-one' },
{ name: 'Fourth-two' },
{ name: 'Fourth-three' },
],
},
{ name: 'Third-two' },
{
name: 'Third-three',
children: [
{ name: 'Fourth-one' },
{ name: 'Fourth-two' },
{ name: 'Fourth-three' },
],
},
],
},
],
},
]"
/>
</template>
<script>
import { MDBTreeview } from "mdb-vue-tree-view";
import { MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBTreeview,
MDBBtn,
},
setup() {
const treeviewRef = ref(null);
return {
treeviewRef,
};
},
};
</script>
<script setup lang="ts">
import { MDBTreeview } from "mdb-vue-tree-view";
import { MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
const treeviewRef = ref<InstanceType<typeof MDBTreeview> | null>(null);
</script>
Events
| Name | Description |
|---|---|
select
|
This event fires immediately when one of the treeview checkboxes are changed. Selected
items are available with items property of the event.
|
active-item
|
This event fires immediately when one of the treeview list items are selected by
click. Selected item is available with
item property of the event.
|
<template>
<MDBTreeview @select="doSomething" >...</MDBTreeview>
</template>