Пагинация

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

import { createApp } from 'vue'
import { NPagination } from 'naive-ui'

const app = createApp({
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 100
    }
  },
  template: `
    <n-pagination
      :page="currentPage"
      :page-size="pageSize"
      :page-count="Math.ceil(totalItems / pageSize)"
      @update:page="currentPage = $event"
    />
  `
})

app.mount('#app')

В данном примере currentPage отслеживает активную страницу, pageSize задаёт количество элементов на страницу, а page-count вычисляется динамически.

Основные свойства компонента

  • page – текущая активная страница. Поддерживает синхронизацию через v-model или событие update:page.
  • page-count – общее количество страниц. Может быть вычислено как Math.ceil(total / pageSize).
  • page-size – количество элементов на странице. Используется при вычислении количества страниц.
  • show-quick-jumper – позволяет быстро перейти к любой странице, введя её номер.
  • show-size-picker – отображает выпадающий список для изменения размера страницы.
  • sizes – массив допустимых значений размера страницы при использовании size picker.
  • disabled – полностью блокирует взаимодействие с компонентом.
  • show-prev-next-btn – отображение кнопок «Назад» и «Вперед».
  • show-first-last-btn – отображение кнопок перехода к первой и последней странице.
  • page-slot – слот для кастомного рендеринга номера страницы.

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

Pagination поддерживает несколько ключевых событий:

  • update:page – срабатывает при изменении активной страницы. Можно использовать для обновления данных на странице.
  • update:page-size – вызывается при изменении размера страницы через size picker.
  • change – обобщённое событие изменения, объединяющее смену страницы и размера страницы.

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

<n-pagination
  v-model:page="currentPage"
  :page-size="pageSize"
  :page-count="pageCount"
  @update:page-size="pageSize = $event"
  @change="handlePageChange"
/>

methods: {
  handlePageChange(page) {
    console.log('Текущая страница:', page)
    this.loadData(page, this.pageSize)
  }
}

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

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

  • show-prev-next-btn – включает/отключает кнопки «Prev» и «Next».
  • show-first-last-btn – добавляет кнопки перехода к первой и последней странице.
  • item-render – функция для кастомного рендеринга каждой страницы. Позволяет изменить текст, добавить иконки или стили.
<n-pagination
  :page="currentPage"
  :page-count="pageCount"
  :item-render="renderPageItem"
/>

methods: {
  renderPageItem({ type, page, active }) {
    if (type === 'page') return `Страница ${page}`
    return type
  }
}

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

Pagination чаще всего используется вместе с таблицами или списками данных. Основной принцип — изменение currentPage инициирует обновление данных.

Пример с таблицей:

<template>
  <n-data-table
    :columns="columns"
    :data="pagedData"
  />
  <n-pagination
    v-model:page="currentPage"
    :page-size="pageSize"
    :page-count="Math.ceil(totalItems / pageSize)"
  />
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 100,
      fullData: [...], // полный массив данных
    }
  },
  computed: {
    pagedData() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.fullData.slice(start, start + this.pageSize)
    }
  }
}
</script>

Вычисляемое свойство pagedData автоматически обновляется при смене страницы, обеспечивая синхронизацию таблицы с компонентом пагинации.

Локализация и стили

Naive UI позволяет настраивать локализацию через locale. Можно изменить подписи кнопок, текста и placeholders:

<n-pagination
  :page="currentPage"
  :page-count="pageCount"
  locale={{
    prev: 'Назад',
    next: 'Вперед',
    total: 'Всего',
    page: 'Страница'
  }}
/>

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

Оптимизация для больших данных

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

async function loadPageData(page, pageSize) {
  const response = await fetch(`/api/data?page=${page}&size=${pageSize}`)
  const result = await response.json()
  this.pagedData = result.items
  this.totalItems = result.total
}

Комбинация реактивного currentPage и асинхронной функции загрузки обеспечивает плавную работу с тысячами записей.

Настройка размера и компактный режим

  • size – устанавливает размер компонентов пагинации: small, medium, large.
  • page-slot – позволяет создавать компактный вид с минимальными кнопками и сокращёнными номерами страниц.

Пример компактной пагинации:

<n-pagination
  v-model:page="currentPage"
  :page-count="pageCount"
  size="small"
  :show-prev-next-btn="false"
/>

Резюме ключевых возможностей

  • Полная кастомизация кнопок и отображения страниц через item-render и слоты.
  • Поддержка событий изменения страницы и размера страницы.
  • Интеграция с таблицами, списками и асинхронными запросами.
  • Гибкая локализация и настройка стилей.
  • Поддержка компактного режима и выбора размера страницы.

Компонент Pagination в Naive UI сочетает простоту использования и гибкость настройки, что делает его идеальным инструментом для реализации навигации в любых интерфейсах на Vue.js.

Оглавление