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

时间:2019-08-06 07:31:23

标签: vue.js pagination vuetify.js

我想删除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>

想要删除分页

7 个答案:

答案 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)

要在v数据表上禁用分页,请使用 disable-pagination prop enter image description here

答案 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>