Группировка данных

Vuetify предоставляет мощные средства для отображения и управления большими объемами данных через компоненты таблиц (v-data-table) и списков (v-list). Одной из ключевых возможностей является группировка данных, которая позволяет визуально объединять строки по общим признакам, упрощая восприятие информации и повышая удобство работы с интерфейсом.

Использование свойства group-by в v-data-table

Компонент v-data-table поддерживает группировку строк через свойство group-by. Это свойство принимает массив строк с названиями полей, по которым необходимо выполнять группировку.

<v-data-table
  :headers="headers"
  :items="items"
  :group-by="['category']"
  item-key="id"
>
</v-data-table>
  • headers – массив объектов, описывающих колонки таблицы.
  • items – массив объектов с данными.
  • group-by – массив ключей объектов, по которым выполняется группировка.
  • item-key – уникальный идентификатор каждой строки.

При этом строки с одинаковым значением поля category будут объединены в одну группу.

Кастомизация групп

Для более гибкой настройки отображения групп можно использовать слот group. Он позволяет задавать собственный шаблон для заголовка группы.

<v-data-table
  :headers="headers"
  :items="items"
  :group-by="['category']"
>
  <template v-slot:group="{ group, items }">
    <tr>
      <td :colspan="headers.length" class="group-header">
        {{ group }} ({{ items.length }} элементов)
      </td>
    </tr>
  </template>
</v-data-table>
  • group – значение, по которому объединяются элементы.
  • items – массив объектов внутри группы.
  • Использование colspan позволяет заголовку группы растянуться на всю ширину таблицы.

Многоуровневая группировка

Vuetify поддерживает множественную группировку по нескольким полям одновременно. Для этого в group-by передается массив с несколькими ключами:

<v-data-table
  :headers="headers"
  :items="items"
  :group-by="['department', 'role']"
>
</v-data-table>

В этом случае данные сначала группируются по department, а внутри каждой группы выполняется дополнительная группировка по role.

Управление раскрытием групп

С помощью свойства expanded можно контролировать, какие группы открыты по умолчанию. Для этого необходимо использовать реактивный массив, содержащий значения групп, которые должны быть раскрыты.

<v-data-table
  :headers="headers"
  :items="items"
  :group-by="['category']"
  :expanded.sync="expandedGroups"
>
</v-data-table>

<script>
export default {
  data() {
    return {
      expandedGroups: ['Фрукты', 'Овощи'], // эти группы будут раскрыты
    };
  },
};
</script>

Сортировка внутри групп

Vuetify позволяет выполнять сортировку данных как на уровне всей таблицы, так и внутри каждой группы. Для этого используется свойство sort-by совместно с group-by.

<v-data-table
  :headers="headers"
  :items="items"
  :group-by="['category']"
  sort-by="name"
  sort-desc
>
</v-data-table>
  • sort-by задает поле для сортировки.
  • sort-desc определяет направление сортировки (по убыванию).

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

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

computed: {
  groupedItems() {
    const groups = {};
    this.items.forEach(item => {
      if (!groups[item.category]) groups[item.category] = [];
      groups[item.category].push(item);
    });
    return Object.entries(groups).map(([category, items]) => ({ category, items }));
  },
}

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

Стилизация групп

Vuetify предоставляет гибкие возможности для стилизации заголовков групп через классы CSS или встроенные утилиты. Рекомендуется использовать различные фоны и шрифты, чтобы визуально отделять группы друг от друга.

.group-header {
  background-color: #f5f5f5;
  font-weight: bold;
  padding: 10px;
}

Поддержка виртуализации

Для больших наборов данных можно сочетать группировку с виртуализированными списками, используя компоненты типа v-virtual-scroll. Это повышает производительность и предотвращает лаги при отрисовке тысяч строк.

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

Группировка работает совместно с фильтрацией через custom-filter или search. Важно учитывать порядок применения фильтров: сначала фильтруются элементы, затем выполняется группировка. Это позволяет создавать динамические группы на основе текущего состояния поиска или фильтров.

Группировка данных во Vuetify сочетает в себе гибкость кастомизации, многоуровневость и интеграцию с сортировкой и фильтрацией, что делает компоненты таблиц и списков удобными для построения сложных интерфейсов с большим количеством информации. Она позволяет создавать понятные визуальные структуры, улучшает UX и делает интерфейс более управляемым при работе с объемными данными.

Оглавление