动态Vue表

Question

我正在尝试在Vue中创建一个动态表，但是我在尝试显示数据的方式上很挣扎。

这是我从API中获得的：（还有更多值，但我会保持简单。）

{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"}

这是我的vue组件的样子：

<template>  
  <table class="table">
    <thead class="thead-light">
      <tr>
        <th v-for="(dados, descricao) in agrupaDados" :key="dados.id">
          {{ descricao }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="dados in agrupaDados" :key="dados.id">
        <td v-for="row in dados" :key="row.id">
          {{ row.valor }}
        </td>
      </tr>
    </tbody>
  </table>
</template>
<script>
  export default {
    props: [
      'dados'
    ],
    computed: {
      agrupaDados() {
        return _.groupBy(this.dados, 'descricao');
      }
    }   
  }
</script>

这是我的桌子的样子： Table

问题在于，与每一列对应的数据正在一行中显示，我不知道如何更改它。为了更好地解释它，我将尝试阐明我得到的结果和我想要得到的结果...

What I have...

Ambiente 01 | Ambiente 02 | Ambiente 03
---------------------------------------
12.5        | 12.2        | 11.9
---------------------------------------
5.5         | 5.2         | 5.7
---------------------------------------    
-2.5        | -2.3        | -2.8

What I want...

Ambiente 01 | Ambiente 02 | Ambiente 03
---------------------------------------
12.5        | 5.5         | -2.5
---------------------------------------
12.2        | 5.2         | -2.3
---------------------------------------    
11.9        | 5.7         | -2.8

如果有人向我解释了如何实现这一目标，我将不胜感激。

谢谢！

Answer 1

<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，因为您有3个不同的列。

data是这样的元素数组：

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" }
]

Answer 2

<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>