javascript - 使用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>

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

Answer 1

我在看同一个问题，找到了一种典型的方法来避免在标记中对数据结构进行硬编码；您可以使用 header 的内容使用 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>