antd 表格分页功能

表格分页

// An highlighted block
		tableOption: {
			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 />