Pagination 分页 当数据量过多时，使用分页分解数据。
基础用法 设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。 分页元素包括：prev（跳转到上一页的按钮）、next（跳转到下一页的按钮）、pager（页码列表）、jumper（跳转输入框）、total（总条目数）、sizes（用于设置每页条数的选择器）以及 ->（该符号之后的所有元素将被靠右对齐）。
When you have few pages 1 2345When you have more than 7 pages 1 23456100TSJSvue
隐藏源代码设置最大页码按钮数 默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。 通过 pager-count 属性可以设置最大页码按钮数。
1 234567891050TSJSvue
:page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000" /> 隐藏源代码带有背景色的分页 设置background属性可以为分页按钮添加背景色。 1 23456100TSJSvue 隐藏源代码小型分页 在空间有限的情况下，可以使用简单的小型分页。 通过size更改大小 这是个 small的例子 1 2345 1 2345TSJSvue size="small" background layout="prev, pager, next" :total="50" class="mt-4" /> 隐藏源代码当只有一页时隐藏分页 当只有一页时，通过设置 hide-on-single-page 属性来隐藏分页。 1 TSJSvue :hide-on-single-page="value" :total="5" layout="prev, pager, next" /> 隐藏源代码附加功能 根据场景需要，可以添加其他功能模块。 此示例是一个完整的用例。 使用了 size-change 和 current-change 事件来处理页码大小和当前页变动时候触发的事件。 page-sizes接受一个整数类型的数组，数组元素为展示的选择每页显示个数的选项，[100, 200, 300, 400] 表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。 defaultlargesmall background: disabled: Total item countTotal 1000 1 3456710Change page size 1 3456710Jump to 1 3456710Go toAll combinedTotal 400 1 234Go toTSJSvue background: disabled:
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" />
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" />
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" />
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" />
隐藏源代码API 属性 属性名说明类型默认值size 2.7.6分页大小enum'default'background是否为分页按钮添加背景色booleanfalsepage-size / v-model:page-size每页显示条目个数number—default-page-size每页默认的条目个数，不设置时默认为10number—total总条目数number—page-count总页数， total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性number—pager-count设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠number7current-page / v-model:current-page当前页数number—default-current-page当前页数的默认初始值，不设置时默认为 1number—layout组件布局，子组件名用逗号分隔stringprev, pager, next, jumper, ->, totalpage-sizes每页显示个数选择器的选项设置array[10, 20, 30, 40, 50, 100]append-size-to 2.8.4下拉框挂载到哪个 DOM 元素string—popper-class每页显示个数选择器的下拉框类名string''popper-style 2.11.5每页显示个数选择器的下拉框样式string / objectaaaprev-text替代图标显示的上一页文字string''prev-icon上一页的图标， 比 prev-text 优先级更高string / ComponentArrowLeftnext-text替代图标显示的下一页文字string''next-icon下一页的图标， 比 next-text 优先级更低string / ComponentArrowRightdisabled是否禁用分页booleanfalseteleported 2.3.13是否将下拉菜单teleport至 bodybooleantruehide-on-single-page只有一页时是否隐藏booleanfalsesmall deprecated是否使用小型分页样式booleanfalseWARNING
我们现在会检查一些不合理的用法，如果发现分页器未显示，可以核对是否违反以下情形：
total 和 page-count 必须传一个，不然组件无法判断总页数；优先使用 page-count;如果传入了 current-page，必须监听 current-page 变更的事件（@update:current-page），否则分页切换不起作用；如果传入了 page-size，且布局包含 page-size 选择器（即 layout 包含 sizes），必须监听 page-size 变更的事件（@update:page-size），否则分页大小的变化将不起作用。事件 名称说明类型size-changepage-size 改变时触发Functioncurrent-changecurrent-page 改变时触发Functionchange 2.4.4current-page 或 page-size 更改时触发Functionprev-click用户点击上一页按钮改变当前页时触发Functionnext-click用户点击下一页按钮改变当前页时触发FunctionWARNING
以上事件不推荐使用（但由于兼容的原因仍然支持，在以后的版本中将会被删除）；如果要监听 current-page 和 page-size 的改变，使用 v-model 双向绑定是个更好的选择。
插槽 名称说明default自定义内容 设置文案，需要在 layout 中列出 slot源代码 组件 • 样式 • 文档
贡献者