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

Question

在我的Vuetify数据表中，我想更改单击的行的背景颜色。在docs中，我看到发出了一个名为click:row的事件，但它仅返回该行的数据。如何检测行字段并更改其CSS？

Answer 1

将被单击的行的索引存储在data属性中：

data () {
    return {
      selectedRow: null
    }
}

然后有条件地应用样式。您需要使用插槽来执行此操作，请参见下面的代码栏：

 <tr :class="key === selectedRow ? 'custom-highlight-row' : ''">

https://codepen.io/huntleth/pen/eYOrWog