How to use dynamic table rowspan in vue.js?

Question

I want to make that table in example photo.

I want to connect with row using by rowspan and made codes. But it didn't work, and browser displayed an error occurred. first of all, my sample data is below.

    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 sub's id includes same number as main's id like "1", "2" in that case, name's row connect with number of sub's array length. So I made code below. My code is written by TypeScript and framework is Nuxt.js and Vuetify.js. Could you advise me, please?

    <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

Dan · Accepted Answer · 2020-10-23 03:39:31Z

You need a row for every sub item, not just every item, and this means 2 loops instead of 1. There are also some logical and syntax errors in your loop and in the implementation of v-simple-table.

The loop should look like this:

<template v-for="item in items">
   <tr v-for="(subitem, iSub) in item.sub" :key="subitem.id">
      <td v-if="iSub === 0" :rowspan="item.sub.length">{{ item.name }}</td>
      <td>{{ subitem.name }}</td>
   </tr>
</template>

A row is made for each subitem, and if it's the first subitem, a rowspan cell is created. Here is a full demo:

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"},
        ]
    }
];
    
new Vue({
  el: '#app',
  data() {
    return {
      items: dummyCssTest
    }
  }
});

.s {
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-simple-table dense>
    <template v-slot:default>
      <thead>
          <tr>
            <th class="blue lighten-5">name</th>
            <th class="blue lighten-5">sub_name</th>
          </tr>
      </thead>
      <tbody>
          <template v-for="item in items">
            <tr v-for="(subitem, iSub) in item.sub" :key="subitem.id">
              <td v-if="iSub === 0" :rowspan="item.sub.length" class="s">{{ item.name }}</td>
              <td>{{ subitem.name }}</td>
            </tr>
          </template>
      </tbody>
    </template>
  </v-simple-table>
</div>

Collectives™ on Stack Overflow

How to use dynamic table rowspan in vue.js?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related