如何在Vuetify中更改数据表的背景颜色？

Question

我想整体更改数据表的背景颜色。我不想使用深色主题或浅色主题。即使使用！important或使用可用的类，我似乎也无法更改它。

Answer 1

只需添加相关的颜色类别，例如class="primary"或vuetify颜色包中的颜色名称。

<v-data-table class="elevation-1 primary"></v-data-table>

Answer 2

1. 像这样向v-data-table标签添加自定义类：

<v-data-table ... class="elevation-1 test" ...>

elevation-1 是其标准类别名称。我添加了 test 来说明这一点。

1. 在自定义CSS的.test .theme--light.v-table选择器中添加必要的样式。

例如.test .theme--light.v-table { background-color: #00f; }

您可能需要用主题名称替换CSS路径中的主题名称。

如果您在DOM内部查看，您会注意到类名test应用于<div>容器，而不是<table>元素。

包含CSS的一种简单方法是在App.vue文件中使用<style>标签：

<style>
  @import './assets/styles/yourstyles.css';
</style>

How to include css files in Vue 2还有更多内容。

Answer 3

您可以使用headers对象指定以下类，

headers: [{
    text: 'Dessert (100g serving)',
    align: 'start',
    divider: true,
    sortable: false,
    value: 'name',
    class: "blue lighten-5"
},
{
    text: 'Calories',
    value: 'calories',
    align: 'center',
    divider: true,
    class: "blue lighten-5"
}]

上面的代码会将light blue background添加到标题中。您可以使用标头对象中的class attr

做更多的事情