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

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>

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

Answer 2

您可以像这样使用 body-cell 根据该行中单元格的值设置整行的样式：

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

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

Quasar table change style of whole row based on value in one cell

css

styles

background-color

vue.js

quasar-framework