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

Question

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

链接到示例图像

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

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

</v-data-table>

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

</v-data-table>

上面的代码仅更改背景颜色，但不更改边框半径。

有没有办法制作类似于您使用 vuetify 看到的图像的东西v-data-table。

任何帮助，将不胜感激。

Answer 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