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

//state外定義cur表示當(dāng)前顯示頁面 var cur=1; //state內(nèi)定義pagination的屬性值 indexTable:{pagination:{//每頁3條項(xiàng)目pageSize:3,//自定義每頁顯示數(shù)目showSizeChanger:true,onShowSizeChange:(current, pageSize)=> {console.log(current, pageSize);},//自定義每頁顯示項(xiàng)目的選項(xiàng)pageSizeOptions:['3','6','9'],// 輸入指定頁碼跳頁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)擊跳頁onChange:(page)=>{// console.log('page:'+page+' cur:'+cur);cur=page;// console.log(cur);}} }

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

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

4.效果：

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

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

總結(jié)

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

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