使用 vuetifyJS 数据表动态建表

Question

我有一个动态变化列的表。因此，表格的模板不能像这样硬编码 -

 <template>
  <v-data-table
    :headers="headers"
    :items="items"
    hide-actions
    class="elevation-1"
  >
    <template slot="items" slot-scope="props">
      **<td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>**
    </template>
  </v-data-table>
</template>

我在响应中获得了这部分的代码。无法弄清楚如何向前传达。

原文由 moran tal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在看同一个问题，找到了一种避免在标记中硬编码数据结构的典型方法；您可以使用标题的内容使用 v-for 循环为项目模板编写脚本，如下所示：

 <div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      hide-actions
      class="elevation-1"
    >
      <template slot="items" slot-scope="myprops">
        <td v-for="header in headers">
        {{ myprops.item[header.value] }}
        </td>
      </template>
    </v-data-table>
  </v-app>
</div>

原文由 Bart Adriaanse 发布，翻译遵循 CC BY-SA 4.0 许可协议