如何设置悬停时 Vuetify v-data-table 行的背景颜色？

Question

如何设置背景颜色属性<v-data-table>？

我尝试了这个，它有效，但不适用于scoped属性，它也会影响组标题行：

<style lang="css">
.theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
    background-color: green;
}
</style>

Answer 1

使用item的槽<v-data-table/>并将您的类添加到该自定义表格行元素。

<v-data-table ...>

  <template v-slot:item="{item}">
    <tr class="green-bg">
      <td>{{item.property1}}</td>
      <td>{{item.property2}}</td>
      <td>{{item.property3}}</td>
    </tr>
  </template>

</v-data-table>

.green-bg {
  /* Set the display to `table-row` because Vuetify makes `flex` */
  display: table-row;
}

.green-bg:hover {
  /* `!important` is necessary here because Vuetify overrides this */
  background: green !important; 
}

这是codesandbox上的示例演示。