我想删除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>
想要删除分页
答案 0 :(得分:4)
正确的答案是添加属性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
答案 1 :(得分:3)
应为: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上的演示
答案 2 :(得分:3)
我只是将这两个道具添加到v-data-table
<v-data-table
hide-default-footer
disable-pagination
/>
无需像这样分配 true
`hide-default-footer="true"
我就是这样做的。
答案 3 :(得分:1)
答案 4 :(得分:0)
ittus的答案几乎可行,但不应绑定属性(除非您有一个名为“ true”的数据属性,该属性设置为布尔值true。
相反,
:hide-default-header="true"
:hide-default-footer="true"
应该是
hide-default-header="true"
hide-default-footer="true"
答案 5 :(得分:0)
正在添加
:hide-default-header="true"
:hide-default-footer="true"
只会删除默认的页脚和页眉,
要完全禁用分页,您需要添加
disable-pagination
到您的<v-data-table>
答案 6 :(得分:-1)
我认为消除分页的正确方法是添加隐藏操作...
<v-data-table :headers="headers" :items="items" hide-actions>
...
</v-data-table>