Vuetify 数据表 - 当每页项目被隐藏时，上一页/下一页显示在左侧

Question

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

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

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

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

我该怎么做？

Answer 1

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

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

第一种方式：将 footer.prepend 槽添加到您的 <v-data-table> 组件中，并使用 <v-spacer/> 组件：

<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 在将其应用到项目之前，您可以在其中测试两种方式。