Стиль изменения таблицы квазаров для всей строки на основе значения в одной ячейке - PullRequest
Новая
       47

Стиль изменения таблицы квазаров для всей строки на основе значения в одной ячейке

1 голос
/ 17 июня 2020

Я пытаюсь изменить стиль всей строки в зависимости от значения в одной ячейке. Для этого я использовал стиль шаблона, однако он позволяет мне изменить стиль только одной ячейки. 

 <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

Но желаемый результат таков, что вся строка будет фиолетовой на основе этого значения в ячейке.

РЕДАКТИРОВАТЬ: Я не знаю сколько столбцов и как они будут называться.

Ответы [ 2 ]

2 голосов
/ 17 июня 2020

v-slot:body-cell-name стилизует только ячейку, которая вам нужна для использования слота body . 

<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

Изменить -

Вы можете сделать для динамических c столбцов, а также только l oop столбцов. 

<q-td
            v-for="col in props.cols"
            :key="col.name"
            :props="props"
          >
            {{ col.value }}
          </q-td>
0 голосов
/ 14 июля 2020

Вы можете использовать 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>

введите описание изображения здесь

...