Pagination

Компонент Pagination является мощным инструментом для организации постраничного отображения данных в приложениях на Vue 3 с использованием Element Plus. Он позволяет разбивать большие массивы данных на страницы, предоставляя пользователю удобные элементы управления навигацией.

Основные свойства

Компонент <el-pagination> поддерживает следующие ключевые свойства:

  • current-page – номер текущей страницы. Обычно связывается с реактивной переменной.
  • page-size – количество элементов на одной странице.
  • page-sizes – массив доступных вариантов количества элементов на странице (например, [10, 20, 50, 100]).
  • layout – определяет структуру отображаемых элементов пагинации. Можно комбинировать: 'prev, pager, next, jumper, ->, total, sizes'.
  • total – общее количество элементов в коллекции.
  • background – добавляет фон к кнопкам страниц для улучшения визуальной заметности.
  • small – уменьшенная версия компонента для компактных интерфейсов.

Пример базовой конфигурации:

<template>
  <el-pagination
    v-model:current-page="currentPage"
    :page-size="pageSize"
    :total="100"
    layout="prev, pager, next"
  />
</template>

<script setup>
import { ref } from 'vue';

const currentPage = ref(1);
const pageSize = ref(10);
</script>

В данном примере создается простая пагинация с кнопками «предыдущая», «следующая» и номерами страниц.

Расширенный layout

Свойство layout позволяет гибко управлять отображением элементов. Основные элементы:

  • prev – кнопка перехода на предыдущую страницу.
  • next – кнопка перехода на следующую страницу.
  • pager – номера страниц.
  • jumper – поле ввода для перехода на конкретную страницу.
  • total – отображение общего количества элементов.
  • sizes – переключатель количества элементов на странице.
  • slot -> – используется для разделения элементов управления на две группы (лево/право).

Пример комбинированного layout:

<el-pagination
  v-model:current-page="currentPage"
  :page-size="pageSize"
  :page-sizes="[10, 20, 50]"
  :total="500"
  layout="total, sizes, prev, pager, next, jumper"
/>

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

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

Компонент Pagination поддерживает несколько событий, полезных для синхронизации с данными:

  • current-change – срабатывает при смене текущей страницы. Аргумент – номер новой страницы.
  • size-change – срабатывает при смене размера страницы. Аргумент – новое количество элементов на странице.

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

<el-pagination
  :current-page="currentPage"
  :page-size="pageSize"
  :total="totalItems"
  @current-change="handlePageChange"
  @size-change="handleSizeChange"
/>

<script setup>
import { ref } from 'vue';

const currentPage = ref(1);
const pageSize = ref(20);
const totalItems = ref(300);

function handlePageChange(newPage) {
  currentPage.value = newPage;
  fetchData(newPage, pageSize.value);
}

function handleSizeChange(newSize) {
  pageSize.value = newSize;
  currentPage.value = 1;
  fetchData(1, newSize);
}

function fetchData(page, size) {
  // логика запроса данных с сервера
}
</script>

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

Использование с серверными данными

Часто данные для пагинации приходят с сервера. Рекомендуется использовать реактивные переменные для текущей страницы, размера страницы и общего количества элементов:

<template>
  <el-pagination
    v-model:current-page="pagination.page"
    :page-size="pagination.pageSize"
    :total="pagination.total"
    layout="prev, pager, next, jumper"
    @current-change="loadPage"
  />
</template>

<script setup>
import { reactive } from 'vue';

const pagination = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
});

async function loadPage(page) {
  pagination.page = page;
  const response = await fetch(`/api/items?page=${page}&limit=${pagination.pageSize}`);
  const data = await response.json();
  pagination.total = data.total;
  // обработка полученных данных
}
</script>

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

Визуальные настройки

  • background делает активную страницу и кнопки более заметными.
  • small уменьшает размер кнопок и текста для компактного интерфейса.
  • Можно использовать кастомные стили через класс el-pagination или через scoped CSS для изменения цветов и отступов.

Пример:

<el-pagination
  v-model:current-page="currentPage"
  :page-size="pageSize"
  :total="100"
  background
  small
  layout="prev, pager, next"
/>

Заключение по возможностям

Компонент Pagination в Element Plus сочетает простоту базового использования с гибкой настройкой и интеграцией с серверными данными. Его свойства, события и возможности layout позволяют строить интерфейсы как для простых списков, так и для больших таблиц и коллекций с динамическими запросами.

Эффективное использование current-page, page-size, событий current-change и size-change, а также правильная настройка layout позволяют создавать удобную и отзывчивую навигацию для пользователей.

Оглавление