如何在 vuetify 中更改 v-data-table 标题的背景颜色和边框半径？答案

【问题标题】：how can change backkground-color and border-radius of v-data-table header in vuetify?如何在 vuetify 中更改 v-data-table 标题的背景颜色和边框半径？
【发布时间】：2021-02-24 10:48:42
【问题描述】：

我想设置v-data-table 标题的样式，如下图所示。

link to example image

到目前为止，我已经尝试使用 CSS 直接添加样式：

<v-data-table
 :headers="headers"
 :items="desserts"
 hide-default-footer
 class="custom_table_class"   
>

</v-data-table>

.custom_table_class > div > table > thead {
  background-color: #f0f2f5;
  border-radius: 10px;
}

上面的代码只改变了背景颜色，而不改变边框半径。

有没有一种方法可以制作类似于您使用 vuetify 的 v-data-table 看到的图像。

任何帮助将不胜感激。

【问题讨论】：

您可能想在此处使用 !important 来覆盖当前样式。试试这个：border-radius: 10px !important;
我也试过了！重要

标签： css vue.js nuxt.js vuetify.js

【解决方案1】：

将 CSS 应用于 <th> 元素：

.custom_table_class thead th {
  background-color: #f0f2f5;
}
.custom_table_class thead th:first-child {
  border-radius: 6px 0 0 0;
}
.custom_table_class thead th:lsat-child {
  border-radius: 0 6px 0 0;
}

或者，在 SCSS 中：

.custom_table_class thead th {
  background-color: #f0f2f5;
  &:first-child { border-radius: 6px 0 0 0 }
  &:last-child { border-radius: 0 6px 0 0 }
}

在这里查看它的工作原理：https://codepen.io/andrei-gheorghiu/pen/YzWdxGX

【讨论】：