TinyVue Pager 分页组件使用教程

使用者常见痛点

• 数据量大时分页切换卡顿，导致使用者体验下降。
• 总条数展示不准确或在异步加载时没有 loading 状态。
• 切换每页条数后仍停留在当前页，出现空白页。
• 翻页前未保存的表单数据被意外覆盖。
• 页面只有一页时仍显示分页，浪费空间。
• 业务需求需要自定义分页布局，却找不到灵活的配置方式。

组件介绍

Pager是数据列表中最常用的导航组件。用于将大量数据分页展示，方便使用者定位到目标数据。TinyVue 的 Pager 组件功能比较多。支持多种显示模式、自定义布局、前置拦截、自定义总条数等公司级特性，可满足从简单列表到复杂表格的各种分页场景。

引入方式：

import { TinyPager } from '@opentiny/vue'

基本用法

通过 :total 设置数据总条数即可快速创建分页组件：

组件默认显示总条数、上一页、页码、下一页和页跳转。

设置当前页

通过 :current-page 设置初始加载时的页码：

每页显示数量

使用 :page-size 控制每页条目数。配合 :page-sizes 提供可选下拉列表：

五种显示模式

:mode 属性决定内部默认的 layout 配置，优先级高于手动设定的 :layout

自定义布局

:layout  属性允许自由组合子组件顺序，用英文逗号分隔：

t ine

t ine
t ine
t ines pan>共 {{ total }} 条
t ine
t ine
 
t ine


t ine


t ine


t inescript setup>
import{ T iny Pager}from'@ op en tiny/v ue';t inescript>

默认 layout 为 'total。prev,pager,next,jumper'。

对齐方式​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​