Pagination

Navigation de pagination de données. Affiche le nombre total, permet de changer la taille de page, de sauter à une page et propose un mode compact.

Pagination

<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 ; événement change : {{ lastChange }}</p>
    <LhPagination :total="total" simple :current.sync="current3" />
    <p class="demo-note">simple : mode compact</p>
    <LhPagination :total="total" disabled :current.sync="current4" />
    <p class="demo-note">disabled : désactivé</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    total: 128,
    current: 3,
    pageSize: 10,
    current2: 1,
    current3: 2,
    current4: 1,
    lastChange: '(aucun)',
  }),
  methods: {
    onChange(page, size) {
      this.lastChange = `Page ${page}, ${size} par page`
    },
  },
}
</script>

Props

Propriété	Description	Type	Valeur par défaut
total	Nombre total de données (obligatoire)	number	—
pageSize	Nombre d'éléments par page	number	—
current	Page actuelle (:current.sync, événement update:current)	number	—
pageSizes	Options de taille de page	number[]	—
showTotal	Affiche le nombre total	boolean	false
showSizeChanger	Affiche le sélecteur de taille de page	boolean	false
showJumper	Affiche le champ de saut de page	boolean	false
simple	Mode compact	boolean	false
disabled	Désactivé	boolean	false
sx	Raccourci de mise en page sx	—	—

Events

Événement	Description	Paramètres de rappel
change	Changement de page ou de taille de page	(page actuelle, taille de page)