css - Quasar 表根据一个单元格中的值更改整行的样式

Question

我正在尝试根据一个单元格中的值更改整行的样式。为此，我使用了模板样式，但它只允许我更改一个单元格的样式。

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

但是，是否可以更改整行的样式，以便整个单元格和行都填充背景色，而不仅仅是单元格值周围的小区域？这是它目前的工作原理:
https://codepen.io/pokepim/pen/pogNyVy
但所需的结果是，根据单元格中的值，整行都是紫色的。
编辑:
我不知道有多少列以及它们的名称是什么。

Answer 1

v-slot:body-cell-name仅设置您需要使用 body slot 的单元格的样式.

<template v-slot:body="props">
        <q-tr :props="props" :class="(props.row.name=='Ice cream sandwich')?'bg-accent text-white':'bg-white text-black'">
          <q-td key="name" :props="props">
            {{ props.row.name }}
          </q-td>
          <q-td key="calories" :props="props">
            <q-badge color="green">
              {{ props.row.calories }}
            </q-badge>
          </q-td>
          <q-td key="fat" :props="props">
            <q-badge color="purple">
              {{ props.row.fat }}
            </q-badge>
          </q-td>
          <q-td key="carbs" :props="props">
            <q-badge color="orange">
              {{ props.row.carbs }}
            </q-badge>
          </q-td>
          <q-td key="protein" :props="props">
            <q-badge color="primary">
              {{ props.row.protein }}
            </q-badge>
          </q-td>
          <q-td key="sodium" :props="props">
            <q-badge color="teal">
              {{ props.row.sodium }}
            </q-badge>
          </q-td>
          <q-td key="calcium" :props="props">
            <q-badge color="accent">
              {{ props.row.calcium }}
            </q-badge>
          </q-td>
          <q-td key="iron" :props="props">
            <q-badge color="amber">
              {{ props.row.iron }}
            </q-badge>
          </q-td>
        </q-tr>
      </template>

代码笔 - https://codepen.io/Pratik__007/pen/NWxbbMK?editors=1010
编辑 -
您可以为动态列做，也可以只循环列。

<q-td
            v-for="col in props.cols"
            :key="col.name"
            :props="props"
          >
            {{ col.value }}
          </q-td>