usePage
分页,依赖vue-router
模块
简单使用方法
ts
import { usePage, PageConfig } from '@blinkjun/elements/hooks/index'
const setTable = async function (pageConfig: PageConfig) {
const { rows, count } = await getData({
page: pageConfig.page!,
limit: pageConfig.limit!
})
}
const { pageConfig, updatePage, resetPage, refreshPage } = usePage(setTable)
// pageConfig
/*
{
page:1,
limit:10,
pageSizeOpts:[10,20]
}
*/
// 刷新当前页面
refreshPage()
// 更新到指定分页
updatePage({ page: 3, limit: 20 })
// 重置为第一页
resetPage()
Parameter
参数 | 说明 | 类型 | 必填 | 默认值 |
---|---|---|---|---|
updateCallback | 当分页、当前页码被修改时自动调用此方法 | Function | 是 | - |
route | 当前路由实例,和router 一起传入时读取链接上的分页参数:page 、limit | RouteLocationNormalized | 否 | - |
router | 路由对象,和route 一起传入时读取链接上的分页参数:page 、limit | Router | 否 | - |
replacePageConfig | 覆盖当前分页配置 | PageConfig | 否 | - |
Returns
返回一个对象,包括以下值
key | 说明 | 类型 | 举例 |
---|---|---|---|
pageConfig | 当前分页配置 | Object | {page:1,limit:10,pageSizeOpts:[10,20]} |
resetPage | 重置当前分页为第一页 | Function | resetPage() |
refreshPage | 刷新当前页 | Function | refreshPage() |
updatePage | 更新至指定分页 | Function | updatePage({page:3,limit:20}) |