Question

我从Vuetify导入了数据表组件，除了Rows per page部分之外，它都工作正常。它不会打开应包含[5、10、20]的列表来重新组织数据表。

更新在照片中，这是错误，选项列表显示在另一个位置。

我查看了我的代码，但与此无关。因此，我删除了整个组件，并用docs中可用的基本示例替换了它，但仍然是相同的问题。

<template>
<v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1"
  >
    <template v-slot:items="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>

，代码脚本部分为

<script>
  export default {
    data () {
      return {
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'left',
            sortable: false,
            value: 'name'
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' }
        ],
        desserts: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%'
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%'
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%'
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8%'
          },
          {
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: '16%'
          },
          {
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            iron: '0%'
          },
          {
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: '2%'
          },
          {
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            iron: '45%'
          },
          {
            name: 'Donut',
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            iron: '22%'
          },
          {
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            iron: '6%'
          }
        ]
      }
    }
  }
</script>

我应该重新检查什么？

Answer 1

将:pagination.sync="pagination"添加到您的<v-data-table>：

<template>
   <v-data-table
       :headers="headers"
       :items="desserts"
       :pagination.sync="pagination"
       class="elevation-1"
   >
   <template v-slot:items="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>

并在您的data对象中：

<script>
  export default {
     data () {
        return {
           pagination: {
                ascending: true,
                sortBy:"name",
                rowsPerPage: 5,
                page: 1
            }
         ....
          }
        }
       }
</script>

Answer 2

当模板不在<v-app>元素中时，会发生此行为。在主app.vue中，从中调用组件，该组件使用<v-data-table>，并用<v-app>和<v-content>封装：

<template>
  <div id="app">
    <v-app>
      <v-content>
        <myComponent></myComponent>
      </v-content>
    </v-app>
  </div>
</template>

与vuetify教程进行比较，例如a random tutorial。

如果缺少top，则下拉css类位置（left和<v-app>）相对于分页元素，并且相对于0位置（左上方）验证表，如果数据表已正确封装。

Answer 3

我遇到了同样的问题，但是有两个带有<v-app>包装器的Vuetify组件（不要问），这会导致下拉偏移问题。

将data-app属性添加到<body>元素对我有帮助：

<body data-app>

Vuetify数据表每页行数不起作用

3 个答案: