[Vuejs]-Vue.js Rendering table with multiple tbody

1👍

You are going to have to use a computed property to format your data structure to be something like

[
  [
    { id: 0, text: a, isLastRow: false },
    { id: 1, text: a, isLastRow: true },
  ],
  [
    { id: 2, text: b, isLastRow: false },
    { id: 3, text: b, isLastRow: false },
    { id: 4, text: b, isLastRow: true },
  ],
]; 

e.g.,

computed: {
  getFormatedItems() {
    const sections = [[]];
    let index = 0;

    this.items.forEach(item => {
      if (item.lastRow) {
         index++;
         section[index] = [];
      }
      section[index].push(item);
    });
  },
},

Then you can write you template like

<template v-for="(section, index) in getFormatedItems">
  <tbody :key="index">
    <tr v-for="item in section" :key="item.id">
      <td>{{item.text}}</td>
    </tr>
  </tbody>
</template>

Leave a comment