Как динамически отобразить список различных таблиц данных

Question

Поддержка функциональности для пользователя для создания / удаления динамических таблиц данных, которые будут сохранены в серверной части.

// statically typed data table
    <v-data-table
        :pagination.sync="pagination"
        :headers="headers"
        :items="items"
        class="elevation-1"
      >
        <template v-slot:items="props">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.column1 }}</td>
          <td class="text-xs-right">{{ props.item.column2 }}</td> 
          <td class="text-xs-right">{{ props.item.column3 }}</td>
          <td class="text-xs-right">{{ props.item.column4 }}</td>
          </td>
        </template>
      </v-data-table>

Однако мой случай:

<template v-for="table in tables">
    //where table will be a new <v-data-table> component with arbitrary rows 
</template>

Кроме того, эти таблицы данных будут иметь обновления в реальном времени, поэтому мне нужно как-то связать каждое состояние данных с vuex для повышения реактивности.

Answer 1

Вот ссылка на первый шаг для вас, просто объедините v-for и v-data-table.

https://codepen.io/anon/pen/QRXyBg?editors=1010

И итерируйте по tables свойству.Вы можете поделиться headers.Если вам нужны динамические / реактивные данные, просто обновите свойство tables из methods или некоторых других мест.