Постраничная навигация

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

Постраничная навигация

<template>
  <div class="demo-col" style="gap: 20px">
    <LhPagination :total="total" :current.sync="current" :page-size="pageSize" />
    <p class="demo-note">current={{ current }}, pageSize={{ pageSize }}</p>
    <LhPagination
      :total="total"
      show-total
      show-size-changer
      show-jumper
      :page-sizes="[10, 20, 50, 100]"
      :current.sync="current2"
      @change="onChange"
    />
    <p class="demo-note">showTotal + showSizeChanger + showJumper; событие change: {{ lastChange }}</p>
    <LhPagination :total="total" simple :current.sync="current3" />
    <p class="demo-note">simple — компактный режим</p>
    <LhPagination :total="total" disabled :current.sync="current4" />
    <p class="demo-note">disabled — отключено</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    total: 128,
    current: 3,
    pageSize: 10,
    current2: 1,
    current3: 2,
    current4: 1,
    lastChange: '(нет)',
  }),
  methods: {
    onChange(page, size) {
      this.lastChange = `Страница ${page}, по ${size} записей`
    },
  },
}
</script>

Props

Проп	Описание	Тип	По умолчанию
total	Общее количество данных (обязательный)	number	—
pageSize	Размер страницы	number	—
current	Текущая страница (:current.sync, имя события update:current)	number	—
pageSizes	Варианты размера страницы	number[]	—
showTotal	Показывать ли общее количество записей	boolean	false
showSizeChanger	Показывать ли переключатель размера страницы	boolean	false
showJumper	Показывать ли поле перехода на страницу	boolean	false
simple	Компактный режим	boolean	false
disabled	Отключение	boolean	false
sx	Проп sx для быстрого макета	—	—

Events

Событие	Описание	Параметры обратного вызова
change	Изменение номера страницы или размера страницы	(текущая страница, размер страницы)