表格分頁

// An highlighted blocktableOption: {columns: [{title: '目標類型', key: 'categoryDisplay', dataIndex: 'categoryDisplay',width: '200px'},{title: '分公司', key: 'companyName', dataIndex: 'companyName',width: '400px'},{title: '年月', key: 'yearMonth', dataIndex: 'yearMonth',width: '200px'},{title: '產品分類', key: 'productionTypeName', dataIndex: 'productionTypeName',width: '200px'},//{title: '產品分類值', key: 'productionType', dataIndex: 'productionType',width: '200px'},{title: '業績目標（萬）', key: 'performanceObjectivesAmount', dataIndex: 'performanceObjectivesAmount',width: '200px'},{title: 'PK目標（萬）', key: 'pkTargetAmount', dataIndex: 'pkTargetAmount',width: '200px'},],dataSource: [], //表格顯示的總數據loading: false,scroll: {x: 1600},pagination: {current: 1, pageSize: 10, total: 0, showTotal: total => `共 ${total} 條`}}, /*** 初始化列表*/loadTable() {let self = this, {tableOption} = this.state;tableOption.loading = true;self.setState({tableOption});api.post(APIS.achievementManageSearch+'?current='+tableOption.pagination.current+'&pageSize='+tableOption.pagination.pageSize, {data: {canshu:666}}).then(function(response){tableOption.dataSource = response.data.data.records;tableOption.pagination.total = response.data.data.total;}).finally(()=>{tableOption.loading = false;self.setState({tableOption});});}//表格點擊頁數事件onTableChange(pagination) {if (pagination.current) {let { tableOption } = this.state;tableOption.pagination.current = pagination.current;tableOption.pagination.pageSize = pagination.pageSize;this.setState({ tableOption });}this.loadTable();}; componentWillReceiveProps(nextProps) {if (this.props.match.params.id !== nextProps.match.params.id) {this.Id = nextProps.match.params.id;this.loadTable();}}<Table onChange={this.onTableChange.bind(this)} {...tableOption} bordered />

總結

以上是生活随笔為你收集整理的antd 表格分页功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。