Pagination

Matches Arco Pagination by default with a tinted primary background for the current page. See the Element Plus docs for props.

Basics & Sizes

Three sizes follow the theme scale; clicking a page updates the current value.

<script setup lang="ts">
import { ref } from 'vue'
const page = ref(2)
const sizes = ['small', 'default', 'large'] as const
</script>

<template>
  <div style="width: 100%; overflow-x: auto; display: grid; gap: 16px">
    <el-pagination v-for="size in sizes" :key="size" v-model:current-page="page" :size="size" :total="50" layout="prev, pager, next" />
  </div>
</template>

Background & Disabled

Background is an Element Plus solid extension; disabled pagination remains non-interactive.

<script setup lang="ts">
import { ref } from 'vue'
const page = ref(2)
</script>

<template>
  <el-pagination v-model:current-page="page" :total="50" background layout="prev, pager, next" />
  <el-pagination v-model:current-page="page" :total="50" disabled layout="prev, pager, next" />
</template>

Full Layout

The full layout keeps Element Plus totals, page-size selection and jump controls; narrow containers scroll horizontally.

<script setup lang="ts">
import { ref } from 'vue'
const page = ref(2)
const pageSize = ref(10)
</script>

<template>
  <div style="width: 100%; overflow-x: auto">
    <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[10, 20, 50]" :total="500" layout="total, sizes, prev, pager, next, jumper" />
  </div>
</template>

Differences from Arco

• The page-size selector keeps Element Plus's fixed default width; Arco sizes it to content.
• Background and full layouts retain Element Plus configuration.