Конфигурация колонок

Quasar Framework предоставляет мощный и гибкий инструмент для построения таблиц с помощью компонента QTable. Ключевым элементом управления отображением данных в таблицах является конфигурация колонок, которая позволяет задавать поведение, внешний вид и функциональные возможности каждой колонки.

Определение колонок

Колонки задаются через массив объектов, передаваемых в проп columns компонента QTable:

const columns = [
  {
    name: 'id',
    label: 'ID',
    align: 'left',
    field: row => row.id,
    sortable: true,
    required: true
  },
  {
    name: 'name',
    label: 'Имя',
    align: 'left',
    field: 'name',
    sortable: true
  },
  {
    name: 'age',
    label: 'Возраст',
    align: 'right',
    field: row => row.age,
    sortable: true
  }
]

Ключевые параметры объекта колонки:

  • name – уникальный идентификатор колонки. Используется для сортировки и фильтрации.
  • label – текст, отображаемый в заголовке таблицы.
  • field – путь к данным или функция для вычисления значения ячейки.
  • align – выравнивание содержимого (left, right, center).
  • sortable – включает возможность сортировки по данной колонке.
  • required – отмечает колонку как обязательную для отображения.

Поля и вычисляемые значения

Поле field может быть как строкой, соответствующей ключу объекта данных, так и функцией, возвращающей значение для конкретной строки:

field: row => `${row.firstName} ${row.lastName}`

Это позволяет динамически формировать содержимое ячейки на основе других данных.

Настройка сортировки

Сортировка колонок задается через свойство sortable. По умолчанию Quasar поддерживает встроенную сортировку, которая работает автоматически для простых типов данных. Для сложных структур можно использовать sortMethod:

{
  name: 'fullName',
  label: 'Полное имя',
  field: row => `${row.firstName} ${row.lastName}`,
  sortable: true,
  sortMethod: (a, b) => a.localeCompare(b)
}

sortMethod получает значения ячеек и возвращает отрицательное, нулевое или положительное число для определения порядка сортировки.

Форматирование и рендеринг ячеек

Для тонкой настройки отображения используется format или слот body-cell-{name}. Пример использования format:

{
  name: 'price',
  label: 'Цена',
  field: 'price',
  format: val => `$${val.toFixed(2)}`,
  align: 'right'
}

С помощью слотов можно полностью переопределить рендеринг:

<template v-slot:body-cell-price="props">
  <q-td :props="props">
    <span :class="{'text-positive': props.value > 100, 'text-negative': props.value <= 100}">
      ${{ props.value }}
    </span>
  </q-td>
</template>

Стилизация колонок

Колонкам можно задавать кастомные CSS-классы через свойства headerClass и classes:

  • headerClass – применяется к заголовку колонки.
  • classes – применяется к ячейкам колонки.
{
  name: 'status',
  label: 'Статус',
  field: 'status',
  headerClass: 'text-center bg-grey-3',
  classes: row => row.status === 'active' ? 'text-positive' : 'text-negative'
}

Фиксированные колонки и ширина

Для управления шириной и фиксированным положением колонок используются свойства style и width:

{
  name: 'id',
  label: 'ID',
  field: 'id',
  width: '80px',
  style: 'min-width: 80px;'
}

Колонки можно фиксировать слева или справа через слот q-table с использованием CSS position: sticky для создания «липких» заголовков или колонок.

Скрытие и динамическое управление колонками

Колонки могут быть скрытыми, если добавить параметр visible:

{
  name: 'secret',
  label: 'Секрет',
  field: 'secret',
  visible: false
}

Динамическое управление колонками позволяет менять видимые колонки на лету:

columns.find(c => c.name === 'secret').visible = true

Группировка и иерархия колонок

Quasar поддерживает группировку колонок с помощью header:

[
  {
    name: 'personal',
    label: 'Персональные данные',
    align: 'center',
    header: true,
    children: [
      { name: 'firstName', label: 'Имя', field: 'firstName' },
      { name: 'lastName', label: 'Фамилия', field: 'lastName' }
    ]
  }
]

Это позволяет объединять несколько колонок под единым заголовком.

Использование колонок с селектами и чекбоксами

Quasar предоставляет специальные типы колонок для интерактивного взаимодействия:

{
  name: 'selected',
  label: '',
  field: 'selected',
  type: 'checkbox'
}

Или можно использовать слоты для кастомных компонентов:

<template v-slot:body-cell-selected="props">
  <q-td :props="props">
    <q-checkbox v-model="props.row.selected" />
  </q-td>
</template>

Резюме ключевых возможностей

  • Колонки задаются массивом объектов с именем, полем и отображением.
  • field может быть строкой или функцией для вычисляемых значений.
  • Сортировка настраивается через sortable и sortMethod.
  • Форматирование через format или слоты позволяет кастомизировать ячейки.
  • Стилизация и ширина управляются через classes, headerClass, style, width.
  • Колонки можно динамически показывать или скрывать с помощью visible.
  • Поддерживаются группы колонок и специальные типы для интерактивного взаимодействия.

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

Оглавление