Блог

Главная - Вопросы по программированию - Динамическая таблица Vue

Динамическая таблица Vue

#vue.js

#vue.js

Вопрос:

Я пытаюсь создать динамическую таблицу в 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>

И вот как выглядит моя таблица:
Таблица

Проблема в том, что данные, соответствующие каждому столбцу, отображаются в строке, и я понятия не имею, как это изменить. Чтобы лучше это объяснить, я попытаюсь проиллюстрировать результат, который я получаю, и результат, который я хотел бы получить…

 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

Я признателен, если кто-нибудь объяснит мне, как этого добиться.

Заранее спасибо!

Комментарии:

1. У вас одинаковое количество элементов в каждом столбце?

2. Нет! Количество элементов, которые будут поступать из API, зависит от того, что выберет пользователь. Итак, теперь у меня есть 3 столбца (Среда 01, Среда 02, среда 03) У меня могла бы быть только одна или более 3-х…

3. Я имею в виду, одинаковое ли у вас количество строк для каждого столбца? В вашем примере 3 строки для Ambiente 01, 3 строки для Ambiente 02 и 3 строки для Ambiente 03

4. Да, в каждой строке одинаковое количество элементов.

Ответ №1:

 <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] amp;amp; 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>

Ответ №2:

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