Пагинация v-pagination

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

Базовое использование включает подключение компонента и привязку значения текущей страницы через директиву v-model:

<v-pagination
  v-model="currentPage"
  :length="totalPages"
  :total-visible="7"
/>
  • v-model связывает текущую страницу с переменной в состоянии компонента.
  • length определяет общее количество страниц.
  • total-visible задает количество видимых кнопок страниц, остальные будут скрыты с использованием многоточий.

Настройка внешнего вида

v-pagination поддерживает стилизацию через стандартные props Vuetify:

  • color – изменяет цвет активной кнопки.
  • background-color – задает цвет фона для всего компонента.
  • rounded – делает кнопки с закругленными углами.
  • circle – превращает кнопки в круглые элементы.

Пример с кастомизацией:

<v-pagination
  v-model="currentPage"
  :length="20"
  color="deep-purple accent-4"
  background-color="grey lighten-3"
  rounded
/>

Динамическая пагинация

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

computed: {
  totalPages() {
    return Math.ceil(this.items.length / this.itemsPerPage);
  },
  paginatedItems() {
    const start = (this.currentPage - 1) * this.itemsPerPage;
    const end = start + this.itemsPerPage;
    return this.items.slice(start, end);
  }
}
  • totalPages автоматически пересчитывает количество страниц при изменении данных.
  • paginatedItems возвращает только те элементы, которые должны отображаться на текущей странице.

Навигационные кнопки

Компонент предоставляет возможность включать кнопки previous и next через props:

<v-pagination
  v-model="currentPage"
  :length="10"
  prev-icon="mdi-chevron-left"
  next-icon="mdi-chevron-right"
/>
  • prev-icon и next-icon позволяют задать собственные иконки для навигации.
  • Кнопки автоматически деактивируются при достижении первой или последней страницы.

Работа с событиями

v-pagination эмиттирует события, которые помогают реагировать на изменения страницы:

  • @input – срабатывает при изменении текущей страницы.
  • @update:model-value – современный аналог @input, используется в Vuetify 3 для привязки v-model.

Пример:

<v-pagination
  v-model="currentPage"
  :length="15"
  @update:model-value="onPageChange"
/>

methods: {
  onPageChange(newPage) {
    console.log('Текущая страница:', newPage);
  }
}

Расширенные возможности

  • total-visible позволяет контролировать количество кнопок, отображаемых одновременно, делая интерфейс компактным.
  • disabled отключает весь компонент при необходимости блокировки навигации.
  • first-icon и last-icon дают возможность добавить быстрые переходы к первой и последней странице.

Пример полной настройки:

<v-pagination
  v-model="currentPage"
  :length="50"
  :total-visible="5"
  first-icon="mdi-page-first"
  last-icon="mdi-page-last"
  prev-icon="mdi-chevron-left"
  next-icon="mdi-chevron-right"
  color="indigo"
  background-color="grey lighten-2"
  rounded
/>

Интеграция с таблицами и списками

v-pagination идеально сочетается с компонентами v-data-table и v-list для управления большими наборами данных. Реактивное обновление массива отображаемых элементов позволяет динамически менять содержимое таблицы при переходе между страницами.

<v-data-table
  :items="paginatedItems"
  :headers="headers"
/>

<v-pagination
  v-model="currentPage"
  :length="totalPages"
/>

Такое сочетание обеспечивает плавную и удобную навигацию без перезагрузки страницы и лишних запросов, если данные уже находятся на клиенте.

Ключевые моменты

  • Связывание с состоянием через v-model обеспечивает реактивное управление текущей страницей.
  • Динамическое вычисление количества страниц делает компонент универсальным для любых объемов данных.
  • Настройка кнопок, цветов и стиля позволяет адаптировать v-pagination под интерфейс проекта.
  • Использование событий помогает интегрировать компонент с другими логическими блоками приложения, такими как таблицы или списки.
Оглавление