[Vuejs]-Dynamic Vue Table

by

0👍

✅

<template> 
   <table class="table">
    <thead class="thead-light">
      <tr>
        <th v-for="(dados, descricao) in agrupaDados">
          {{ descricao }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in maxRows">
        <td v-for="dados in agrupaDados">
          {{ dados[row-1] && dados[row-1].valor }}
        </td>
      </tr>
    </tbody>
  </table>
</template> 
<script>
  export default {
    props: [
      'dados'
    ],
    computed: {
      agrupaDados() {
        return _.groupBy(this.dados, 'descricao');
      },
      maxRows() {
        // calculating max rows count
        return Math.max(..._.map(this.agrupaDados, (g) => g.length));
      }
    } 
  }
</script>

0👍

<tbody>
    <tr v-for="index in (data.length / 3)">
      <td>{{ data[3 * (index - 1)].valor }}</td>
      <td>{{ data[3 * (index - 1) + 1].valor }}</td>
      <td>{{ data[3 * (index - 1) + 2].valor }}</td>
    </tr>
</tbody>

data.length / 3 because you have 3 different columns.

Where data is an array of elements like this:

data: [
    { id: 1, descricao: "Ambiente 01", valor: "12.5" },
    { id: 2, descricao: "Ambiente 02", valor: "5.5" },
    { id: 3, descricao: "Ambiente 03", valor: "-2.5" },
    { id: 4, descricao: "Ambiente 01", valor: "12.2" },
    { id: 5, descricao: "Ambiente 02", valor: "5.2" },
    { id: 6, descricao: "Ambiente 03", valor: "-2.3" },
    { id: 7, descricao: "Ambiente 01", valor: "11.9" },
    { id: 8, descricao: "Ambiente 02", valor: "5.7" },
    { id: 9, descricao: "Ambiente 03", valor: "-2.8" }
]

Leave a comment