Выбор строк

В библиотеке Naive UI выбор строк (row selection) является важным компонентом при работе с таблицами (n-data-table). Он позволяет пользователю выделять одну или несколько строк для дальнейшей обработки, фильтрации или выполнения операций над выбранными элементами. Управление выбором строк реализуется через свойства таблицы и соответствующие события.

Одновременный и множественный выбор

Для включения выбора строк используется свойство rowSelection. Оно может быть объектом с настройками или булевым значением. Основные параметры:

  • type – определяет режим выбора: 'single' (одиночный выбор) или 'multiple' (множественный выбор).
  • selectedRowKeys – массив ключей выбранных строк.
  • onChange – функция-обработчик изменения выбора.
  • getCheckboxProps – функция для настройки доступности или состояния конкретной строки.

Пример конфигурации множественного выбора:

const rowSelection = {
  type: 'multiple',
  selectedRowKeys: reactive([]),
  onChange: (keys, rows) => {
    console.log('Выбранные ключи:', keys)
    console.log('Выбранные строки:', rows)
  },
  getCheckboxProps: row => ({
    disabled: row.disabled
  })
}

В этом примере selectedRowKeys хранит актуальные выбранные строки, а getCheckboxProps позволяет отключить выбор для определённых элементов.

Связывание выбора с данными

Ключом (key) каждой строки является уникальное свойство объекта данных, обычно id. Без указания ключа выбор строк работать не будет корректно. Используется атрибут row-key:

<n-data-table
  :columns="columns"
  :data="tableData"
  row-key="id"
  :row-selection="rowSelection"
/>

row-key может принимать строку (имя свойства) или функцию:

rowKey: row => row.uniqueId

Это особенно полезно, если структура данных сложная или ключ формируется динамически.

Программное управление выбором

Выбор строк можно контролировать программно, изменяя массив selectedRowKeys. Например, выделить первые две строки при загрузке:

selectedRowKeys.value = [tableData[0].id, tableData[1].id]

Для снятия выбора достаточно очистить массив:

selectedRowKeys.value = []

Использование реактивного состояния из Vue 3 позволяет таблице автоматически обновлять видимые чекбоксы при изменении массива.

События выбора строк

Naive UI предоставляет события для отслеживания действий пользователя:

  • onChange – вызывается при любом изменении выделения.
  • onSelectAll – активируется при выборе всех доступных строк.
  • onSelect – вызывается при выборе или снятии конкретной строки.

Пример обработки всех событий:

const rowSelection = {
  type: 'multiple',
  selectedRowKeys: reactive([]),
  onChange: (keys, rows) => console.log('Изменение выбора', keys, rows),
  onSelectAll: (checked, rows) => console.log('Выбор всех', checked, rows),
  onSelect: (row, checked) => console.log('Выбор строки', row, checked)
}

Настройка отображения чекбоксов

Можно полностью контролировать отображение чекбоксов для каждой строки через слот selection-column или функцию getCheckboxProps. Например, для отображения кастомного состояния:

getCheckboxProps: row => ({
  disabled: row.status === 'inactive',
  label: `Выбрать ${row.name}`
})

Здесь строки с status: 'inactive' будут недоступны для выбора.

Примеры пользовательских сценариев

  1. Выбор только активных элементов Использовать getCheckboxProps для отключения неактивных строк.

  2. Синхронизация с внешним состоянием Привязка selectedRowKeys к глобальному стору позволяет использовать выбор таблицы в других компонентах.

  3. Выбор по условию Можно автоматически выделять строки, удовлетворяющие фильтру:

selectedRowKeys.value = tableData
  .filter(row => row.score > 80)
  .map(row => row.id)

Советы по производительности

  • Для больших таблиц рекомендуется использовать виртуализацию строк, чтобы не рендерить все чекбоксы одновременно.
  • Не хранить весь объект строки в selectedRowKeys, достаточно уникальных ключей.
  • Использовать реактивные массивы Vue 3 для автоматической синхронизации выбора с таблицей.

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

Оглавление