Paginación

Si tiene que mostrar muchos datos en una página, utilice la paginación.

Uso básico

Asigne en el atributo layout los diferentes elementos que quiere utilizar separados por coma. Pagination elements are: prev (a button navigating to the previous page), next (a button navigating to the next page), pager (page list), jumper (a jump-to input), total (total item count), sizes (a select to determine page size) and ->(every element after this symbol will be pulled to the right).

When you have few pages

When you have more than 7 pages

Número de páginas

De forma predeterminada, Pagination colapsa los botones del paginador adicionales cuando tiene más de 7 páginas. Esto se puede configurar con el atributo pager-count.

Botones con color de fondo

Establecer el atributo background y los botones tendrán un color de fondo.

Paginación pequeña

Use paginación pequeña en caso de espacio limitado.

set size to change the size. Here is a demonstration of small

Oculte la paginación cuando solo hay una página

Cuando solo hay una página, oculte la paginación configurando el atributo hide-on-single-page.

Más elementos

Añade más módulos basados en tu escenario.

Este ejemplo es un completo caso de uso. Utilice los eventos size-change y current-change para manejar el tamaño de página y el cambio de página. El atributo page-sizes acepta un arreglo de enteros, cada uno representa un diferente valor del atributo sizes que es un select, ejemplo: [100, 200, 300, 400] indicará que el select tendrá las opciones: 100, 200, 300 o 400 elementos por página.

Total item count

Total 1000

Change page size

Jump to

Go to

All combined

Total 400

Go to

vue

<template>
  <div class="flex items-center mb-4">
    <el-radio-group v-model="size" class="mr-4">
      <el-radio-button value="default">default</el-radio-button>
      <el-radio-button value="large">large</el-radio-button>

      <el-radio-button value="small">small</el-radio-button>
    </el-radio-group>
    <div>
      background:
      <el-switch v-model="background" class="ml-2" />
    </div>
    <div class="ml-4">
      disabled: <el-switch v-model="disabled" class="ml-2" />
    </div>
  </div>

  <hr class="my-4" />

  <div class="demo-pagination-block">
    <div class="demonstration">Total item count</div>
    <el-pagination
      v-model:current-page="currentPage1"
      :page-size="100"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, prev, pager, next"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <div class="demo-pagination-block">
    <div class="demonstration">Change page size</div>
    <el-pagination
      v-model:current-page="currentPage2"
      v-model:page-size="pageSize2"
      :page-sizes="[100, 200, 300, 400]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="sizes, prev, pager, next"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <div class="demo-pagination-block">
    <div class="demonstration">Jump to</div>
    <el-pagination
      v-model:current-page="currentPage3"
      v-model:page-size="pageSize3"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="prev, pager, next, jumper"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <div class="demo-pagination-block">
    <div class="demonstration">All combined</div>
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { ComponentSize } from 'element-plus'

const currentPage1 = ref(5)
const currentPage2 = ref(5)
const currentPage3 = ref(5)
const currentPage4 = ref(4)
const pageSize2 = ref(100)
const pageSize3 = ref(100)
const pageSize4 = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>

API

Attributes

Nombre	Descripción	Tipo	Por defecto
size 2.7.6	pagination size	`enum`	'default'
background	si los botones tienen un color de fondo	`boolean`	false
page-size / v-model:page-size	contador de elementos de cada página	`number`	—
default-page-size	default initial value of page size, not setting is the same as setting 10	`number`	—
total	total de elementos	`number`	—
page-count	total de páginas. Asigne `total` o `page-count` y las páginas serán mostradas; si necesita `page-sizes`, `total` es requerido	`number`	—
pager-count	número de paginadores. La paginación colapsa cuando el número total de páginas excede este valor	`number`	7
current-page / v-model:current-page	número de página actual	`number`	—
default-current-page	default initial value of current-page, not setting is the same as setting 1	`number`	—
layout	disposición de la paginación, elementos separados con una coma	`string`	prev, pager, next, jumper, ->, total
page-sizes	opciones de conteo de elementos por página	`array`	[10, 20, 30, 40, 50, 100]
append-size-to 2.8.4	which element the size dropdown appends to	`string`	—
popper-class	nombre de clase personalizado para el tamaño de página del select desplegable	`string`	''
popper-style 2.11.5	custom style for the page size Select's dropdown	`string` / `object`	—
prev-text	texto para el botón anterior	`string`	''
prev-icon	icon for the prev button, has a lower priority than `prev-text`	`string` / `Component`	ArrowLeft
next-text	texto para el siguiente botón	`string`	''
next-icon	icon for the next button, has a lower priority than `next-text`	`string` / `Component`	ArrowRight
disabled	si la paginación está deshabilitada	`boolean`	false
teleported 2.3.13	whether Pagination select dropdown is teleported to the body	`boolean`	true
hide-on-single-page	whether to hide when there's only one page	`boolean`	false
small deprecated	si desea utilizar una paginación pequeña	`boolean`	false

WARNING

Detectaremos algunos usos obsoletos, si la paginación no apareció o funcionó como se esperaba, por favor revise las siguientes reglas:

Tiene que definir uno de total y page-count, de lo contrario no podemos determinar el número total de páginas. Si ambos están definidos, page-count se toma de forma prioritaria.
Si current-page está definida, tiene que escuchar los cambios de current-page, por definirlo también @update:current-page, de lo contrario la paginación no funcionara.
Si page-size está definido mientras se muestra el selector de tamaño de página (sizes incluido en layout), tienes que escuchar también el cambio page-size definido por @update:page-size, de lo contrario el cambio del tamaño de la página no funcionara.

Events

Nombre	Descripción	Tipo
size-change	se dispara cuando `page-size` cambia	`Function`
current-change	se dispara cuando `current-page` cambia	`Function`
change 2.4.4	triggers when `current-page` or `page-size` changes	`Function`
prev-click	se dispara cuando el botón prev recibe el clic y la página actual cambia	`Function`
next-click	se dispara cuando el botón next recibe el clic y la página actual cambia	`Function`

WARNING

Los eventos anteriores no son recomendados (pero siguen siendo soportados por una razón de compatibilidad), mejor opción es usar el enlace de datos bidireccionales por v-model.