如何动态呈现不同数据表的列表

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。 如果您需要动态/反应性数据，只需从 methods 或其他一些地方更新 tables 属性。