pagination.md

usePagination

为【分页】提供页码，页数，每页大小，页码变化等逻辑

Type

function usePagination(): {
    page: Ref<number>
    pageSize: Ref<number>
    pageCount: Ref<number>
    data: Ref<[]>
    paginationData: Ref<[]>
    pageChange(curPage:number):void
    pageSizeChange(curPageSize:number):void
    callback: Ref<Function>
}

Return

• page — 页码
• pageSize — 每页大小
• pageCount — 页数
• data — 手动分页时传入的源数据
• paginationData — 分页后当前页数据
• pageChange(curPage) — 翻页函数，页码通过参数传入
• pageSizeChange(curPageSize) — 改变每页大小函数，每页大小通过参数传入
• callback — 分页发生变化后的回调函数

Example

import { ref, onMounted } from "@vue/composition-api";
import { usePagination } from 'chooks'
export default {
    setup(){

        let { page, pageSize, pageCount, pageChange, pageSizeChange, data, paginationData, callback } = usePagination()

        //远程分页
        callback.value = function(pg, pgSize){
            store.dispatch("queryByPage", {
                page: page.value,
                pageSize: page.value
            }).then(data=>{
                pageCount.value = data.pageCount
            })
        }
        pageChange(2)
        pageSizeChange(20)

        //手动分页
        onMounted(()=>{
            store.dispatch("queryAll").then(data=>{
                data.value = data
                console.log(paginationData.value)
            })
            pageChange(1)
            pageSizeChange(10)
        })

        return {
           page, pageSize, pageCount, pageChange, pageSizeChange, paginationData 
        }
    }
}