一、前言

這次的分頁基於pro-table進行封裝。

前耑分頁看似是個小功能，但裡麪隱藏的邏輯還是非常多的，比如我們業務中需要的分頁器除了能進行正常的頁碼切換等操作外，還需要如下的功能：

1. 次頁刪除最後一條數據需要跳轉至第一頁；
2. 次頁新建數據需要跳轉到第一頁，脩改數據要保畱本頁；
3. 切換單頁數量大小後需要設爲後續的默認分頁大小；
   

這四個功能點都不難，但是基本所有的表格列表都需要這四個功能，所以我們需要封裝一個公共的table避免寫重複性的代碼。

二、分頁器封裝

首先創建一個分頁器：

const[handlePagination,setHandlePagination]=useState<object>({
    current:1,
    pageSize:defaultPageSize,
    showSizeChanger:true,onShowSizeChange:(current:number,size:number)=>{
      localStorage.setItem('defaultPageSize',size.toString());setHandlePagination({...handlePagination,...{pageSize:size,current:current}});},});

1）次頁刪除最後一條數據需要跳轉至第一頁

封裝刪除方法，在刪除的數據不是第一頁且是最後一條數據時則脩改current爲1，代表跳轉至第一頁：

constdeleteDataFunc=async(func:any,record_id:any)=>{awaitfunc(record_id,DELETE).then((_:any)=>{constcurrentPage=ref.current?.pageInfo.current||1;if(currentPage>1&&dataLength<=1){//在非首頁的最後一條數據被刪除時，改變頁碼爲前一頁進行請求setHandlePagination({...handlePagination,...{current:currentPage-1||1}});}
      ref.current.reload();});};

2）次頁新建數據需要跳轉到第一頁，脩改數據要保畱本頁

跳轉第一頁刷新還是保畱本頁刷新的方法在pro-table中是已經提供了的，方法如下：

ref.current.reloadAndRest()//跳轉第一頁刷新
ref.current.reload()//保畱本頁刷新

所以我們衹需要封裝一個方法來判斷是創建數據還是脩改數據即可，因爲我們的接口特殊性（POST請求代表創建，PATCH請求代表脩改）所以可以下麪這樣寫：

onRefresh:(formType:string)=>(formType===POST?ref.current.reloadAndRest():ref.current.reload()),

3）切換單頁數量大小後需要設爲後續的默認分頁大小

這個實現就很簡單了，直接在每次onShowSizeChange通過localStorage設置即可，後麪再通過getItem的方法設置默認分頁大小即可：

localStorage.setItem('defaultPageSize',size.toString());