表格分頁(yè)

// An highlighted blocktableOption: {columns: [{title: '目標(biāo)類型', key: 'categoryDisplay', dataIndex: 'categoryDisplay',width: '200px'},{title: '分公司', key: 'companyName', dataIndex: 'companyName',width: '400px'},{title: '年月', key: 'yearMonth', dataIndex: 'yearMonth',width: '200px'},{title: '產(chǎn)品分類', key: 'productionTypeName', dataIndex: 'productionTypeName',width: '200px'},//{title: '產(chǎn)品分類值', key: 'productionType', dataIndex: 'productionType',width: '200px'},{title: '業(yè)績(jī)目標(biāo)（萬(wàn)）', key: 'performanceObjectivesAmount', dataIndex: 'performanceObjectivesAmount',width: '200px'},{title: 'PK目標(biāo)（萬(wàn)）', key: 'pkTargetAmount', dataIndex: 'pkTargetAmount',width: '200px'},],dataSource: [], //表格顯示的總數(shù)據(jù)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});});}//表格點(diǎn)擊頁(yè)數(shù)事件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 />

總結(jié)

以上是生活随笔為你收集整理的antd 表格分页功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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