I am trying to create a table similar to the one in the example photo.
https://i.sstatic.net/fkXDx.png
I attempted to connect rows using rowspan and wrote some code for it, but unfortunately, I encountered an error in the browser. To start with, here is my sample data:
export const dummyCssTest = [
{
id:"1",
name:"a",
sub:[
{id:"1#1",name:"b"},
{id:"1#2",name:"c"},
]
},
{
id:"2",
name:"d",
sub:[
{id:"2#1",name:"e"},
{id:"2#2",name:"f"},
{id:"2#3",name:"g"},
]
}
]
If the sub's id contains the same number as the main's id, e.g. "1", "2", then the names should be connected based on the number of elements in the sub array. Below is the code snippet I tried to implement. It is written in TypeScript and uses Nuxt.js and Vuetify.js frameworks. I would appreciate any advice or guidance you can provide.
<template>
<div>
<v-simple-table dense>
<thead>
<tr>
<th class="blue lighten-5">name</th>
<th class="blue lighten-5">sub_name</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td :rowspan="[sub.length]">{{item.name}}</td>
<td>{{item.sub[sub.length].name}}</td>
</tr>
</tbody>
</v-simple-table>
</div>
</template>
<script lang="ts">
import { Component, Vue} from 'nuxt-property-decorator'
import { dummyCssTest } from "~/store/dummy";
@Component({})
export default class extends Vue{
items:any=[]
mounted(){
this.items = dummyCssTest
}
}
</script>
<style lang="scss" scoped>
</style