WPagination 分页组件
分页组件,基于 WinDesignNext Pagination 封装,用于数据列表分页,modelValue 绑定当前页码,pageSize、total 等支持 path 数据绑定。
基础用法
API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
component | string | WPagination | 组件类型(必填) |
modelValue | DataBindingValue | — | 当前页码绑定 |
pageSize | DataBindingValue | 10 | 每页条数 |
total | DataBindingValue | — | 总条数 |
pageCount | DataBindingValue | — | 总页数(与 total 二选一) |
pageSizes | DataBindingValue | — | 每页条数选项 |
layout | string | — | 布局,如 total, sizes, prev, pager, next |
background | boolean | true | 是否显示背景色 |
small | boolean | false | 小型分页 |
disabled | boolean | false | 是否禁用 |
hideOnSinglePage | boolean | false | 仅一页时隐藏 |
action | object | — | 分页变化事件配置 |
事件
| 事件 | type | 说明 |
|---|---|---|
| 页码/条数变化 | change | 页码或每页条数变化时触发(默认) |
| 页码变化 | current-change | 仅当前页变化 |
| 条数变化 | size-change | 仅每页条数变化 |
json
{
"action": {
"event": {
"name": "onPageChange",
"type": "change",
"context": [
{ "key": "page", "value": { "path": "/currentPage" } },
{ "key": "pageSize", "value": { "path": "/pageSize" } }
]
}
}
}path 支持说明
| 属性 | path 支持 | 说明 |
|---|---|---|
modelValue | ✅ | 当前页码双向绑定 |
pageSize | ✅ | 每页条数 |
total | ✅ | 总条数 |
pageCount | ✅ | 总页数 |
pageSizes | ✅ | 每页条数选项(literalArray 或 path) |
Agent 更新分页状态
json
{
"version": "v0.9",
"updateDataModel": {
"surfaceId": "main",
"path": "/",
"value": { "currentPage": 2, "pageSize": 20, "total": 256 }
}
}使用场景
| 场景 | 推荐配置 |
|---|---|
| 表格分页 | modelValue + pageSize + total + change 事件 |
| Agent 翻页 | action 携带 /currentPage context,Agent 更新 dataModel |
| 精简布局 | layout: "prev, pager, next" |
注意事项
modelValue与currentPage等效,优先使用modelValuetotal与pageCount二选一即可- 默认
change事件在页码或每页条数变化时都会触发