I'm facing a similar problem in Vuetify 3 - I need to style an entire row based on the data of an item. The proposed solutions with :row-props
don't work, and overriding the whole row template doesn't work for me as I already have a lot of custom cell templates and the code would be bloated. The developers also seem to have no plans to make a solution for the issue.
In the end, I settled the problem in a slightly crutchy, but compact and quite flexible way. We simply add a hidden element with the custom class (ie, .highlight_parent_row
) inside any cell in the row, and then use the tr:has()
construct to set the styles we need.
<template>
<VDataTable
:headers="headers"
:items="filteredLotsList"
>
<template #item.controls="{ item }">
<div class="processed-item d-none" v-if="item.processed_time"><!-- just for flagging --></div>
<VToolbar>
<VBtn :icon="'tabler-clipboard-copy'" @click="copyToClipboard" />
<VBtn :icon="'tabler-eye-off'" @click="markItemProcessed" />
</VToolbar>
</template>
// rest of the code
</VDataTable>
</template>
<style>
tr:has(.processed-item) {
background-color: #e5f8e5;
}
</style>
Hopefully this necroposting will save someone some time and nerves :)