Paginación

Navegación de datos paginada. Admite la visualización del total, el cambio del tamaño de página, el salto de página y el modo compacto.

Paginación

<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; evento change: {{ lastChange }}</p>
    <LhPagination :total="total" simple :current.sync="current3" />
    <p class="demo-note">simple: modo compacto</p>
    <LhPagination :total="total" disabled :current.sync="current4" />
    <p class="demo-note">disabled: deshabilitado</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    total: 128,
    current: 3,
    pageSize: 10,
    current2: 1,
    current3: 2,
    current4: 1,
    lastChange: '(ninguno)',
  }),
  methods: {
    onChange(page, size) {
      this.lastChange = `Página ${page}, ${size} por página`
    },
  },
}
</script>

Props

Propiedad	Descripción	Tipo	Predeterminado
total	Número total de datos (obligatorio)	number	—
pageSize	Número de elementos por página	number	—
current	Página actual (:current.sync; nombre del evento update:current)	number	—
pageSizes	Opciones de tamaño de página	number[]	—
showTotal	Si se muestra el total de elementos	boolean	false
showSizeChanger	Si se muestra el selector de tamaño de página	boolean	false
showJumper	Si se muestra el campo de salto de página	boolean	false
simple	Modo compacto	boolean	false
disabled	Si se deshabilita	boolean	false
sx	Propiedad de diseño rápido sx	—	—

Eventos

Evento	Descripción	Parámetro de callback
change	Cambio de página o de tamaño de página	(página actual, tamaño de página)