Vuetify删除v-data-table上的分页

Question

我想删除v-data-table上的分页，使用hide-default-footer，但是不起作用。

尝试使用hide-dafault-footer

<v-data-table
        :headers="headers"
        :items="desserts"
        hide-default-header
        hide-default-footer
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.index }}</td>
          <td>{{ props.item.name }}</td>
          <td>{{ getProject(props.item.project_uuid) }}</td>
          <td>{{ props.item.deadline }}</td>
          <td>{{ getUser(props.item.executor) }}</td>
          <td>{{ getUser(props.item.creator) }}</td>
          <td>{{ props.item.description }}</td>
        </template>
      </v-data-table>

想要删除分页

Answer 1

正确的答案是添加属性disable-pagination，如Vuetify文档中所述： https://vuetifyjs.com/en/components/data-tables/ Vuetify documentation

对于Vuetify 2.x版本，这是正确的，如果您使用的是Vuetify 1.5，请改用hide-actions属性。 https://v15.vuetifyjs.com/en/components/data-tables

Answer 2

应为:hide-default-footer="true"

<v-data-table
        :headers="headers"
        :items="desserts"
        :hide-default-header="true"
        :hide-default-footer="true"
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.index }}</td>
          <td>{{ props.item.name }}</td>
          <td>{{ getProject(props.item.project_uuid) }}</td>
          <td>{{ props.item.deadline }}</td>
          <td>{{ getUser(props.item.executor) }}</td>
          <td>{{ getUser(props.item.creator) }}</td>
          <td>{{ props.item.description }}</td>
        </template>
      </v-data-table>

在codepen上的演示

Answer 3

我只是将这两个道具添加到v-data-table

 <v-data-table
  hide-default-footer
  disable-pagination
 />

无需像这样分配 true `hide-default-footer="true"

我就是这样做的。

Answer 4

要在v数据表上禁用分页，请使用 disable-pagination prop

Answer 5

ittus的答案几乎可行，但不应绑定属性（除非您有一个名为“ true”的数据属性，该属性设置为布尔值true。

相反，

:hide-default-header="true"
:hide-default-footer="true"

应该是

hide-default-header="true"
hide-default-footer="true"

Answer 6

正在添加 :hide-default-header="true" :hide-default-footer="true" 只会删除默认的页脚和页眉， 要完全禁用分页，您需要添加 disable-pagination到您的<v-data-table>

Answer 7

我认为消除分页的正确方法是添加隐藏操作...

<v-data-table :headers="headers" :items="items" hide-actions>
   ...
</v-data-table>