How to display nested lists in a table in vuetify?
How to display nested lists in a table in vuetify?
1 answer
by
brandy ,
2 months ago
@lizzie
To display nested lists in a table using Vuetify, you can use the v-data-table component along with templates and slot-scope. Here is an example code snippet to display a nested list in a table:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<template>
<v-data-table
:headers="headers"
:items="items"
>
<template v-slot:item.children="{ item }">
<ul>
<li v-for="child in item.children" :key="child.id">{{ child.name }}</li>
</ul>
</template>
</v-data-table>
</template>
<script>
export default {
data() {
return {
headers: [
{ text: 'ID', value: 'id' },
{ text: 'Name', value: 'name' },
{ text: 'Children', value: 'children', align: 'center' }
],
items: [
{
id: 1,
name: 'Parent 1',
children: [
{ id: 1, name: 'Child 1' },
{ id: 2, name: 'Child 2' }
]
},
{
id: 2,
name: 'Parent 2',
children: [
{ id: 1, name: 'Child 1' }
]
}
]
};
}
};
</script>
|
In this code snippet, we define a v-data-table component with columns for ID, Name, and Children. We use the v-slot:item.children template for the Children column to iterate over the nested list items and display them in a <ul> list within each row.
This will display the nested list items under the Children column for each parent item in the table.