Выбор строк в таблицах

Vuetify предоставляет мощный компонент для отображения таблиц — v-data-table, который поддерживает выбор строк, как одиночный, так и множественный. Управление выбором реализуется через специальные свойства и события, позволяющие интегрировать таблицу с состоянием приложения.

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

Для активации выбора строк используется свойство show-select:

<v-data-table
  :headers="headers"
  :items="items"
  item-key="id"
  show-select
>
</v-data-table>
  • show-select добавляет в начало каждой строки чекбокс.
  • item-key определяет уникальный идентификатор каждой строки — критично для корректной работы механизма выбора.

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

Состояние выбранных элементов хранится в переменной, связанной с v-model таблицы:

<v-data-table
  :headers="headers"
  :items="items"
  item-key="id"
  show-select
  v-model:selected="selectedItems"
>
</v-data-table>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', price: 100 },
        { id: 2, name: 'Item 2', price: 200 },
      ],
      selectedItems: [], // массив выбранных элементов
    };
  },
};
</script>
  • v-model:selected автоматически синхронизирует выбранные строки с переменной selectedItems.
  • При добавлении или удалении строк из selectedItems интерфейс таблицы моментально обновляется.

Выбор одной строки

Если необходимо разрешить выбор только одной строки, используется модификатор single-select:

<v-data-table
  :headers="headers"
  :items="items"
  item-key="id"
  show-select
  single-select
  v-model:selected="selectedItem"
>
</v-data-table>
  • В этом режиме selectedItem хранит объект единственной выбранной строки, а не массив.
  • Попытка выбрать другую строку автоматически снимает выбор с предыдущей.

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

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

<v-data-table
  ref="table"
  :headers="headers"
  :items="items"
  item-key="id"
  show-select
  v-model:selected="selectedItems"
></v-data-table>

<script>
export default {
  mounted() {
    // Программный выбор первой строки
    this.selectedItems = [this.items[0]];

    // Альтернативно, через ref:
    this.$refs.table.select(this.items[1]);
  },
};
</script>
  • Метод select(item) добавляет элемент к выбору.
  • Метод deselect(item) снимает выбор с элемента.
  • Для множественного выбора можно передавать массив объектов.

Реагирование на события выбора

v-data-table генерирует события при изменении выбора:

  • update:selected — вызывается при изменении массива выбранных элементов.
  • item-selected — событие на отдельной строке при выборе или снятии выбора.

Пример:

<v-data-table
  :headers="headers"
  :items="items"
  item-key="id"
  show-select
  v-model:selected="selectedItems"
  @update:selected="onSelectionChange"
>
</v-data-table>

<script>
export default {
  methods: {
    onSelectionChange(selected) {
      console.log('Выбраны строки:', selected);
    },
  },
};
</script>
  • Это позволяет синхронизировать таблицу с другими компонентами или выполнять действия при изменении выбора.

Кастомизация чекбоксов и внешнего вида

Vuetify поддерживает кастомные слоты для чекбоксов:

<v-data-table
  :headers="headers"
  :items="items"
  item-key="id"
  show-select
  v-model:selected="selectedItems"
>
  <template #item.data-table-select="{ isSelected, toggle }">
    <v-checkbox
      :input-value="isSelected"
      @click="toggle"
      color="primary"
    ></v-checkbox>
  </template>
</v-data-table>
  • #item.data-table-select — слот для рендеринга кастомного элемента выбора.
  • isSelected показывает состояние строки, а toggle — функцию для изменения состояния выбора.
  • Это позволяет использовать иконки, цветовые индикаторы или собственный дизайн вместо стандартного чекбокса.

Выбор всех строк

Включение выбора всех строк осуществляется автоматически при использовании show-select. Для программного выбора всех строк:

this.selectedItems = [...this.items];

Для снятия выбора:

this.selectedItems = [];
  • При больших таблицах рекомендуется использовать ленивую загрузку и динамическое управление выбором, чтобы не хранить все объекты в памяти.

Интеграция с фильтрацией и пагинацией

Выбор строк корректно работает даже при фильтрах и пагинации:

<v-data-table
  :headers="headers"
  :items="items"
  item-key="id"
  show-select
  v-model:selected="selectedItems"
  :search="search"
  :items-per-page="5"
>
</v-data-table>
  • При фильтрации выбранные строки сохраняются в selectedItems.
  • При смене страницы сохраняется состояние выбора для каждой строки.
  • Это делает компонент удобным для работы с динамическими таблицами с большим количеством данных.

Особенности работы с объектами и ключами

  • item-key должен быть уникальным и неизменяемым.
  • Если в таблице сложные объекты, можно использовать глубокие ключи:
item-key="user.id"
  • При изменении данных строки с сохранённым item-key таблица корректно отображает выбор.

Примеры практического применения

  1. Множественное удаление элементов:
<v-btn
  color="red"
  @click="deleteSelected"
>
  Удалить выбранные
</v-btn>

<script>
methods: {
  deleteSelected() {
    this.items = this.items.filter(item => !this.selectedItems.includes(item));
    this.selectedItems = [];
  }
}
</script>
  1. Перенос выбранных данных в другой компонент или модуль:
const payload = this.selectedItems.map(item => ({ id: item.id, name: item.name }));
sendToServer(payload);
  1. Сложная фильтрация с сохранением выбранных строк:
<v-data-table
  :headers="headers"
  :items="filteredItems"
  item-key="id"
  show-select
  v-model:selected="selectedItems"
>
</v-data-table>
  • filteredItems может быть результатом поиска, фильтров или вычисляемого свойства.

Использование возможностей выбора строк в Vuetify позволяет строить динамичные интерфейсы с управлением данными, обеспечивая удобство взаимодействия с таблицами как для одиночного, так и для множественного выбора. Контролируемый выбор, слоты для кастомизации и интеграция с фильтрацией делают v-data-table гибким инструментом для любых приложений на Vue.js.

Оглавление