79470419

Date: 2025-02-26 16:32:32
Score: 3.5
Natty:
Report link

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 :)

Reasons:
  • Blacklisted phrase (0.5): I need
  • RegEx Blacklisted phrase (2): doesn't work for me
  • Long answer (-1):
  • Has code block (-0.5):
  • Me too answer (2.5): I'm facing a similar problem
Posted by: Denis O.