Vuetify 数据 table - previous/next 页面在隐藏每页项目时显示在左侧

Question

我试图完全隐藏 table 的 items-per-page 选择，同时保持 next/previous 功能不变。

我可以通过设置这个道具来隐藏它：

:footer-props="{
              'items-per-page-options':[10],
              'disable-items-per-page': true,
            }"

这很棒，但现在 previous/next 功能位于 table 页脚的左侧。我想把它放在右边。

我该怎么做？

Answer 1

这是一个已经在 vuetify 库的 #13751 and #13678 问题中描述的错误。但是仍然没有“开箱即用”的解决方案。

您可以通过多种方式解决您的问题：

第一种方式：将footer.prepend 插槽添加到带有<v-spacer/> 组件的<v-data-table> 组件中:

<v-data-table 
  ...
  :footer-props="{
    'items-per-page-options':[10],
    'disable-items-per-page': true,
  }"
>
  <template #footer.prepend>
    <v-spacer/>
  </template>
</v-data-table>

第二种方式：如果你不需要支持RTL，你可以覆盖其中一个内置的CSS 类:

.v-application--is-ltr .v-data-footer__pagination {
  margin-left: auto;
}

There's a codepen 您可以在将其应用到您的项目之前测试这两种方式。

Vuetify 数据 table - previous/next 页面在隐藏每页项目时显示在左侧

Vuetify data table - previous/next page is showing on the left side when items-per-page is hidden

html

javascript

css

vue.js

vuetify.js