I'm trying to change style of whole row based on the value in one cell. For this I used template styling, however it only allows me to change the style of one cell.
<q-table
:data="rows"
row-key="name"
>
<template v-slot:body-cell-name="props">
<q-td :props="props">
<div>
<q-badge
:label="props.value"
:class="(props.value=='Ice cream sandwich') ?
'bg-accent spc' : 'bg-white text-black'"
></q-badge>
</div>
</q-td>
</template>
</q-table>
However is it possible to change the style of whole row so that the whole cell and the row is filled with the background color instead of only small area around the cell value? Here how it works currently: https://codepen.io/pokepim/pen/pogNyVy
But desired result is so that the whole row is purple based on that value in cell.
EDIT: I dont know how many columns and what their names will be.
You can use body-cell like this to style an entire row based on the value of a cell in that row:
<template v-slot:body-cell="props">
<q-td
:props="props"
:class="(props.row.name=='Ice cream sandwich')?'bg-accent text-white':'bg-white text-black'"
>
{{props.value}}
</q-td>
</template>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With