技术文档

打开导航菜单

PIG AI Guide
============

切换主题搜索

[](https://wwads.cn/click/bait)[![](https://cdn.wwads.cn/creatives/HYKVsnrmfPfixKqkTmAG9VrkVFraIps5tqkbEE8n.jpg)
](https://wwads.cn/click/bundle?code=9jV4U87gm2l5qP0HxzCu8wLpUQUQrP)

[注册亚马逊云服务免费套餐🆓可享高达200美元抵扣金🚀包括免费使用精选服务🎉](https://wwads.cn/click/bundle?code=9jV4U87gm2l5qP0HxzCu8wLpUQUQrP)[广告](https://wwads.cn/?utm_source=property-270&utm_medium=footer "点击了解万维广告联盟")

PIGX 技术指南
=========

适配 5.0 以上单体和微服务版本

PIGX 技术指南PIG

⌘K

参与开发

快速上手

前端部分

功能使用

后端部分

扩展必看

生产部署

社区分享

更新日志

更新日期: 2025-10-23

最后更新: 2025/8/19

切换主题

前端表格分页组件
========

[](#分页组件使用)分页组件使用
-----------------

*   分页组件一般和表格组件一起使用，只需要回调 useTable hook 中的函数即可

```


`<pagination   v-bind="state.pagination"   @current-change="currentChangeHandle"   @size-change="sizeChangeHandle"  ></pagination>`




```

```


`const  { currentChangeHandle, sizeChangeHandle }  =  useTable(state);`




```

[](#卡槽扩展)卡槽扩展
-------------

```


`<query-tree>   <template  #default="{ node, data }">  </template>  </query-tree>`




```

[](#属性说明)属性说明
-------------

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| 

`current`

 | 

`Number`

 | 

`1`

 | 

当前页码。

 |
| 

`size`

 | 

`Number`

 | 

`10`

 | 

每页展示的条数。

 |
| 

`total`

 | 

`Number`

 | 

`0`

 | 

数据总数。

 |
| 

`pageSizes`

 | 

`Array`

 | 

`[1, 10, 20, 50, 100, 200]`

 | 

每页展示的条数可选项。

 |
| 

`layout`

 | 

`String`

 | 

`'total, sizes, prev, pager, next, jumper'`

 | 

分页组件的布局。

 |

### 本页导航

分页组件使用

卡槽扩展

属性说明