antd 表格的分页属性设置

1、引入Table 组件 

<Table
    bordered
    loading={ loading }
    pagination={ paginationProps }
    rowSelection={ rowSelection }
    onRowDoubleClick={this.dbClick }
    columns={ this.columns }
    dataSource={ this.dataSource }
    style={{ marginTop: '10px' }}
    scroll={{ y: 280 }}
/>

2、定义  pagination 属性

const {
      lutList:{ data, page },
      loading,
    } = this.props;

    // 表格数据的总条数
    const totals = page.total;

    // 表格分页属性
    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: false,
      showTotal: () => `共${totals}条`,
      pageSize: this.state.pageSize,
      current: page.pageNum,
      total: page.total,
      onShowSizeChange: (current,pageSize) => this.changePageSize(pageSize,current),
      onChange: (current) => this.changePage(current),
    };

3、定义 改变页数 和 每页显示的条数 的方法

// 回调函数，切换下一页
  changePage(current){
    
    const { dispatch } = this.props;
    const params = {
      pageNum: current,
      pageSize: this.state.pageSize,
    };
    dispatch({
      type: 'lutList/fetch',
      payload: params,
    })
  }

 

 // 回调函数,每页显示多少条
  changePageSize(pageSize,current){

    // 将当前改变的每页条数存到state中
    this.setState({
      pageSize: pageSize,
    });
    
    // 向后台请求
    const { dispatch } = this.props;
    const params = {
      pageSize: pageSize,
    };
    dispatch({
      type: 'lutList/fetch',
      payload: params,
    })
  }