基于一单元格的值，如何改变整行的样式 - 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 但期望的结果是，整行基于单元格中的值呈紫色。

编辑： 我不知道有多少列和它们的名称。

- Alex T

Answer 1

您可以像这样使用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>

- jtlindsey

---

这个很好用，但是有没有办法添加第二个条件？如果它是A，我需要将列颜色更改为一个值；如果是B，我需要将其更改为第二个值；如果是C，我需要将其更改为第三个值。 - Cynthia

你可以创建一个方法根据所需的条件返回一个值。 - undefined

Answer 2

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

- Patel Pratik

---

但问题是我不知道有多少列，所以这在我的情况下行不通。 - Alex T