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

Posted 2023-02-22

【中文标题】如何更改 Vuetify 中数据表的背景颜色？

【英文标题】：How to change background color of data tables in Vuetify?

【发布时间】：2019-06-16 13:42:17

【问题描述】：

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

【参考方案1】：

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

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

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方留下评论。 - From Review

在vuetify中，primary是主题中原色的名称，primary类将元素的背景设置为原色。因此，在 v-data-table 组件上添加类 'primary' 或 vuetify 网站上的任何颜色名称都会将数据表的背景颜色设置为该颜色。这正是 OP 所要求的。

【参考方案2】：

向v-data-table 标签添加自定义类，如下所示：

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

elevation-1 是它们的标准类名。我添加了 test 来说明这一点。

在您的自定义 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 对此有更多了解。

【讨论】：

在 v-data-table 元素本身上会更好

【参考方案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 添加到您的标题中。您可以使用 headers 对象中的 class attr 做更多事情

【参考方案4】：

当前的答案对我不起作用，但我找到了一个简单的解决方案。我会分享它以防万一将来有人看到。

# 1. Add a class to the table element  
<v-simple-table class="table">
...
 </v-simple-table>

# 2. Add background color
<style scoped>
.table 
  background-color: red;

</style>