Skip to content
On this page

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一起传入时读取链接上的分页参数:pagelimitRouteLocationNormalized-
router路由对象,和route一起传入时读取链接上的分页参数:pagelimitRouter-
replacePageConfig覆盖当前分页配置PageConfig-

Returns

返回一个对象,包括以下值

key说明类型举例
pageConfig当前分页配置Object{page:1,limit:10,pageSizeOpts:[10,20]}
resetPage重置当前分页为第一页FunctionresetPage()
refreshPage刷新当前页FunctionrefreshPage()
updatePage更新至指定分页FunctionupdatePage({page:3,limit:20})