Как изменить цвет строки или карточки в таблице Q-Table таким образом, чтобы цвет менялся динамически?

Question

Сократ

vue

Как изменить цвет строки или карточки в таблице Q-Table таким образом, чтобы цвет менялся динамически?

Как в Quasar Framework задать индивидуальный класс для строки таблицы в зависимости от определенного значения элемента, аналогично параметру :item-class в Vuetify для q-table? Я искал информацию в документации Quasar, но не нашел способа сделать это без редактирования шаблона таблицы. Можно ли динамически присваивать класс строкам таблицы как в Vuetify?

20 мая 2024 г. 12:01

Ответы на вопрос 2

Похожие вопросы

Answer 1

Да, в Quasar Framework также есть возможность динамически изменять стили строк таблицы. Для этого вы можете воспользоваться слотами внутри компонента q-table. Вот пример:

```vue
<template>
  <q-page>
    <q-table
      :rows="rows"
      :columns="columns"
    >
      <template v-slot:body-cell-item="props">
        <q-td :props="props" :class="getRowClass(props.row)">
          {{ props.value }}
        </q-td>
      </template>
    </q-table>
  </q-page>
</template>

<script>
export default {
  data() {
    return {
      rows: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
      ],
      columns: [
        { name: 'name', label: 'Name' },
        { name: 'age', label: 'Age' }
      ]
    }
  },
  methods: {
    getRowClass(row) {
      // Динамически определяем класс для строки
      if (row.age > 26) {
        return 'age-over-26'
      }
    }
  }
}
</script>

<style scoped>
.age-over-26 {
  background-color: red;
  color: white;
}
</style>
```

В данном примере мы использовали слот `body-cell-item` для кастомизации отображения ячеек в таблице. Метод `getRowClass` определяет класс, который будет присвоен строке в зависимости от значения свойства `age`. Класс `age-over-26` добавляет красный фон и белый текст для строк, в которых значение `age` больше 26.

Надеюсь, это поможет вам динамически изменить цвет строки или карточки в вашей таблице Quasar Framework.

Answer 2

Можно в описание каждой колонки добавить поле classes типа 
 row => (row.calories % 2 === 0 ? 'bg-green text-white' : 'bg-yellow') 
 но применится оно не к строке, а к ячейке. 
 на строку/карточку можно попробовать навесить через селектор has, но он не везде поддерживается https://caniuse.com/?search=has