通過(guò)這個(gè)，對(duì)組件的之間的套用，多了一些了解。不再是單純的，復(fù)制提供的組件代碼，而是通過(guò)屬性賦值，將多個(gè)組件功能同時(shí)實(shí)現(xiàn)。
1.實(shí)現(xiàn)原理：主要應(yīng)用的還是Table，通過(guò)對(duì)Table屬性pagination的設(shè)置，實(shí)現(xiàn)指定功能。
2.邏輯：定義pagination鍵值對(duì)，初始化相關(guān)屬性，可以在state中定義，也可以直接定義。
需要注意的是，在state中定義時(shí)，需要在state外單獨(dú)定義，current對(duì)應(yīng)的變量，因?yàn)閟tate設(shè)置變量有延遲，可能沒(méi)法及時(shí)賦值實(shí)現(xiàn)跳頁(yè)。（最好有個(gè)小模擬，觀察在state內(nèi)外的區(qū)別）

//state外定義cur表示當(dāng)前顯示頁(yè)面 var cur=1; //state內(nèi)定義pagination的屬性值 indexTable:{pagination:{//每頁(yè)3條項(xiàng)目pageSize:3,//自定義每頁(yè)顯示數(shù)目showSizeChanger:true,onShowSizeChange:(current, pageSize)=> {console.log(current, pageSize);},//自定義每頁(yè)顯示項(xiàng)目的選項(xiàng)pageSizeOptions:['3','6','9'],// 輸入指定頁(yè)碼跳頁(yè)showQuickJumper:true,onShowQuickJump:(page)=>{// console.log('page:'+page+' cur:'+cur);cur=page;// console.log(cur);},//全部項(xiàng)目數(shù)（最好可以用變量表示，與實(shí)際項(xiàng)目數(shù)關(guān)聯(lián)）total: 100,// 點(diǎn)擊跳頁(yè)onChange:(page)=>{// console.log('page:'+page+' cur:'+cur);cur=page;// console.log(cur);}} }

3.布局：current沒(méi)定義在pagination鍵值對(duì)中，故要另外賦值，同時(shí)順序有要求，先賦值current，再賦值鍵值對(duì)

<Table pagination={{current:cur} pagination={state.indexTable.pagination}/>

4.效果：

參考鏈接：https://blog.csdn.net/qq_41140741/article/details/87907288

？？？？：
布局中,pagination={{current:cur}不設(shè)也沒(méi)關(guān)系？

總結(jié)

以上是生活随笔為你收集整理的ant design-Table中的分页实现（包括点击跳页，输入跳页，以及指定每页项目数）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。