分页 Pagination

默认对应 Arco Pagination，当前页使用浅主色背景。 属性用法见 Element Plus 文档。

基础与尺寸

三档尺寸对应主题尺寸，点击页码更新当前页。

<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 是 Arco 没有的实心形态，禁用状态保留不可操作的语义。

<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>

完整布局

完整 layout 保留 Element Plus 的总数、条数选择与跳转形态，窄容器内可横向滚动。

<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>

与 Arco 的差异

• 每页条数选择框保留 Element Plus 默认宽度，Arco 按内容决定宽度。
• background 和完整布局保留 Element Plus 配置形态。