Выбор строк

В библиотеке Quasar для JavaScript выбор строк является одной из ключевых задач при построении интерфейсов с таблицами, списками и формами. Основным компонентом для отображения табличных данных является <q-table>, который обладает встроенными механизмами управления выбором строк.

Включение возможности выбора строк

Для активации выбора строк в <q-table> используется свойство selection. Оно может принимать значения:

  • 'single' — разрешает выбор только одной строки;
  • 'multiple' — разрешает множественный выбор;
  • 'none' — отключает выбор строк.

Пример использования:

<q-table
  :rows="users"
  :columns="columns"
  row-key="id"
  selection="multiple"
  v-model:selected="selectedRows"
/>

Здесь v-model:selected связывает выбранные строки с локальной переменной selectedRows.

Управление выбранными строками

Выбор строк можно отслеживать и программно изменять через selected и методы компонента:

  • toggleRowSelection(row) — переключает состояние выбранной строки;
  • clearSelection() — снимает выделение со всех строк;
  • selectAll() — выделяет все строки таблицы.

Пример программного управления:

methods: {
  selectFirstUser() {
    this.$refs.myTable.toggleRowSelection(this.users[0])
  },
  clearAllSelections() {
    this.$refs.myTable.clearSelection()
  }
}

Важно: для корректной работы необходимо задать ref="myTable" на компоненте <q-table>.

Индикаторы выбора

Quasar автоматически добавляет чекбоксы для множественного выбора. Для одиночного выбора можно использовать выделение строки при клике с помощью свойства highlight:

<q-table
  :rows="users"
  :columns="columns"
  row-key="id"
  selection="single"
  highlight
  v-model:selected="selectedUser"
/>

highlight визуально выделяет выбранную строку и улучшает UX при навигации по таблице.

Пользовательские события

Компонент <q-table> генерирует события, которые позволяют реагировать на изменения выбора:

  • @selection="onSelection" — срабатывает при изменении выделенных строк;
  • @row-click="onRowClick" — реагирует на клики по строкам;
  • @row-dblclick="onRowDblClick" — реагирует на двойные клики.

Пример:

methods: {
  onSelection(rows) {
    console.log('Выбранные строки:', rows)
  },
  onRowClick(row) {
    console.log('Клик по строке:', row)
  }
}

Сложные сценарии выбора

  1. Выбор с фильтрацией Если таблица использует фильтры, можно настроить выбор так, чтобы он учитывал только видимые строки:
<q-table
  :rows="users"
  :columns="columns"
  row-key="id"
  selection="multiple"
  v-model:selected="selectedRows"
  :selected.sync="visibleRows"
>

  1. Выбор с пагинацией При разбиении на страницы необходимо контролировать выбор глобально, так как по умолчанию selected относится только к текущей странице.

  2. Выбор с кастомными компонентами Можно использовать слот body-cell для отображения кастомных элементов с чекбоксами или переключателями. Это позволяет реализовать нестандартное поведение выбора.

<q-table :rows="users" :columns="columns" row-key="id">
  <template v-slot:body-cell-select="props">
    <q-checkbox
      v-model="props.selected"
      @update:model-value="props.toggleSelection"
    />
  </template>
</q-table>

Стилизация выбранных строк

Quasar предоставляет возможность настраивать классы выбранных строк через слот row-class:

<q-table
  :rows="users"
  :columns="columns"
  row-key="id"
  selection="multiple"
  :row-class="rowClass"
>
</q-table>

methods: {
  rowClass(row) {
    return this.selectedRows.includes(row) ? 'bg-blue-2 text-white' : ''
  }
}

Так можно визуально выделять строки цветом или изменять шрифты в зависимости от состояния выбора.

Заключение к функциональности выбора

Выбор строк в Quasar реализован гибко: компоненты предоставляют управление через свойства, методы и события, позволяют работать с одиночным и множественным выбором, интегрируются с фильтрацией, пагинацией и кастомными слотами. Продуманная архитектура <q-table> позволяет легко комбинировать визуальные и программные подходы к выбору строк, обеспечивая интерактивность и удобство работы с данными.

Оглавление