Pagination 分页
在多页数据间切换的导航控件
<script>
import { ref } from 'vue'
const page = ref(1)
</script>用法
基础
total 按 pageSize 计算页数；show-info 显示页码信息，show-first-last 增加首末页按钮。
示例加载中...
每页条数
page-sizes 在页码后加入条数选择器；换条数不改动当前页，是否回到第 1 页由宿主决定。
示例加载中...
数据运维面板
分页紧贴表格底部，与筛选、选择状态共享同一组响应式数据。
与 DataTable、Skeleton 组合
示例加载中...
最佳实践
- 优先传
total与pageSize；后端只返回页数时才用totalPages。 currentPage从 1 开始计数，初始化为1。- 筛选、搜索词或每页条数变化后，把
currentPage重置为1。 - 用
pageSizes代替自建的条数选择框：它由可见标签命名，并与分页同排。 - 用
info插槽输出本地化的范围文案，如「正在查看第 21–40 条，共 120 条」。
API 参考
属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| currentPage | 当前页，从 1 开始计数 | ||
| pageSize | 每页条数；读者可修改时配合 v-model:page-size | ||
| pageSizes | 可选条数，提供后渲染条数选择器；无效值丢弃，缺失的 pageSize 自动补入 | ||
| pageSizeLabel | 条数选择器前的可见标签，也为选择器命名 | ||
| total | - | 总条数；省略或为 0 时改用 totalPages | |
| totalPages | - | 显式总页数，未提供 total 时使用 | |
| prevIcon | 上一页图标类，由 TxIcon 渲染；留空使用内置箭头 | ||
| nextIcon | 下一页图标类，由 TxIcon 渲染；留空使用内置箭头 | ||
| showInfo | 显示页码与总量信息 | ||
| showFirstLast | 显示首末页按钮 | ||
| ariaLabel | 根节点 nav 地标的 aria-label | ||
| firstLabel | 首页按钮的 aria-label | ||
| prevLabel | 上一页按钮的 aria-label | ||
| nextLabel | 下一页按钮的 aria-label | ||
| lastLabel | 末页按钮的 aria-label |
事件
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| update:currentPage | - | 当前页更新（v-model） | |
| pageChange | - | 用户切换页码时触发 | |
| update:pageSize | - | 选择其他条数时更新（v-model），不改动当前页 | |
| pageSizeChange | - | 选择其他条数时触发 |
插槽
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| info | - | 自定义页码信息区域 |
概述
- 页数由
total与pageSize计算；total省略或为 0 时使用totalPages。 currentPage越界时，组件以最近的合法页派发update:currentPage。- 当前页按钮带
aria-current="page"；上一页、下一页与首末页按钮带可读的aria-label，在边界页禁用。 - 只有提供有效的
pageSizes时才渲染条数选择器，其 combobox 经aria-labelledby指向可见标签；否则 DOM 不变。 - 选择不同的条数时依次派发
update:pageSize、pageSizeChange，不改动当前页。 - 按需样式插件会一并加载选择器样式；手动引入样式时还需
select/style.css及其依赖。
技术实现
- 源码：
packages/tuffex/packages/components/src/pagination/。
查看源码
packages/tuffex/packages/components/src/pagination/index.ts