Vuetify数据表

Question

我有以下代码：

<v-app>
  <v-content>
    <v-container fluid full-height>
      <v-layout row wrap>
        <v-flex xs12>
          <v-data-table
            hide-actions
            :headers='headers'
            :items='items'
            class='elevation-1'
          ></v-data-table>
        </v-flex>
      </v-layout>
    </v-container>
  </v-content>
</v-app>

在脚本部分：

data: {
headers: [
      {text: 'Name', value: 'name'},
    {text: 'Age', value: 'age'}
  ],
  items: [
      {
      name: 'John',
      age: 30
    }
  ]
}

https://jsfiddle.net/eywraw8t/507618/

我不明白为什么我只获取表的标题而不是数据。 有人可以帮我吗？

Answer 1

您必须在v-data-table组件的“ items”插槽中定义表单元格。标头会自动呈现，您可以从客户标头中指定一个“标头”插槽。从codepen中检出此Vuetify Docs on datatables。请注意v-data-table元素中定义“项目”插槽的模板。

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    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 2

只需在表格单元格中定义一个插槽即可。在您的代码中，您已经添加了道具道具。您需要使用数据表单元格填充插槽内的项目。

这是您的代码，其中有新的更改。

<v-app>
  <v-content>
    <v-container fluid full-height>
      <v-layout row wrap>
        <v-flex xs12>
          <v-data-table
            hide-actions
            :headers='headers'
            :items='items'
            class='elevation-1'
          >
           <template slot="items" slot-scope="props">
             <td>{{ props.item.name }}</td>
             <td class="text-xs-right">{{ props.item.age }}</td>
           </template>
         </v-data-table>
        </v-flex>
      </v-layout>
    </v-container>
  </v-content>
</v-app>

如果您需要更多信息，read the docs

希望这会有所帮助。