ant-design table 分页（tableProps）

我就是我 2021-11-17 08:58 395阅读 0赞

From: [https://www.cnblogs.com/crazycode2/p/9704382.html][https_www.cnblogs.com_crazycode2_p_9704382.html]

1.布局

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>&lt;</code><code>Table</code> <code>&nbsp;&nbsp;</code><code>dataSource={this.state.tableDetailList}</code> <code>&nbsp;&nbsp;</code><code>scroll={ { y: '200px' }}</code> <code>&nbsp;&nbsp;</code><code>style={ {tableLayout: 'fixed'}}</code> <code>&nbsp;&nbsp;</code><code>pagination={ { pageSize: 12 }}</code> <code>&nbsp;&nbsp;</code><code>columns={columns1}</code> <code>&nbsp;&nbsp;</code><code>rowKey={record =&gt; record.restId}</code> <code>&nbsp;&nbsp;</code><code>pagination={ {&nbsp; // 分页</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>simple: true,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>current: this.state.current,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>total: this.state.total2,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>onChange: this.changePage,</code> <code>&nbsp;&nbsp;</code><code>}}</code> <code>/&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

2.逻辑

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>changePage = (page) =&gt; { </code> <code>&nbsp;&nbsp;</code><code>this</code><code>.setState({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>current: page,</code> <code>&nbsp;&nbsp;</code><code>}, () =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let</code> <code>param = JSON.parse(JSON.stringify(</code><code>this</code><code>.state.param))</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>param = { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>...param,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>pageNum: </code><code>this</code><code>.state.current,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>pageSize: 10,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.getActivityRestDetailList(param)</code> <code>&nbsp;&nbsp;</code><code>})</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

[https_www.cnblogs.com_crazycode2_p_9704382.html]: https://www.cnblogs.com/crazycode2/p/9704382.html