无法在 vuetify v-data-table 中调整页脚填充

Question

我有一个非常标准的 veutify v-data-table 和标准的分页页脚。我需要偏移页脚项目，使它们不在漂浮在它们上方的元素下方。

我试过：

#table  .v-data-footer {
  padding: 0 100px !important;
}

和

.v-data-footer {
  padding: 0 100px !important;
}

但这两种方法都行不通。我们使用的是 SCSS 样式，而不是 SASS，因此有关页脚填充的 vue 文档似乎没有帮助。

我有多余的声望，所以最佳答案将在 48 小时后获得 50 点赏金。

编辑：我正在使用 Vuetify 版本 2.5.6

Answer 1

将您的风格更改为 padding: 100px 0 !important;。如果这不起作用，那意味着由于 css 特异性，您的样式没有得到更新，您必须增加选择器的特异性。例如，如果数据 table 的 ID 为 table-id，您可以尝试 #table-id.v-data-table .v-data-footer 来提高特异性。

如果您使用的是旧版本的 Vuetify，那么 class 不会是 .v-data-footer。它将是 .v-datatable__actions

Answer 2

您可以使用深层功能将范围添加到 class。

::v-deep  .v-data-footer {
  padding: 0 100px;
}

无法在 vuetify v-data-table 中调整页脚填充

unable to adjust the footer padding in a vuetify v-data-table

css

vuetify.js

vuetify-datatable