ant design 中的table中的分页

 <Row>  {base ? <Table columns={base.columns} dataSource={base.data} style={{ marginTop: 10 }} pagination={{
                  simple:false,
                  current:basePagination.current,
                  total:basePagination.total,
                  pageSizeOptions:['10','20','30','40','50'],
                  showSizeChanger:true,
                  pageSize:basePagination.pageSize,
                  showTotal: (count=basePagination.total)=>{
                    return '共'+count+'条数据'
                  },
                  //onChange:ChangePage(),
                  onChange:(current,pageSize)=>{
                    onBaseClick(current,pageSize)
                  }
                }}/> : <Empty />} </Row>

调用的方法（分页点击的）：

function onBaseClick(current,pageSize){
    dispatch({
      type: "customerProtectLog/queryBase",
      payload: {
        current:current,
        pageSize:pageSize
      }
    })
  }

 

这个只是一个table的展示，其中这里面自己遇到的问题有：

1、pageSizeOptions不显示，这个可以看官网，数组是字符串数组，所以参数要传正确

2、还有就是方法onChange,这里遇到的问题是注释掉的代码，调用这个会持续请求后端接口    结果浏览器卡住。。。

3、注意自己调用参数的顺序，这都是坑   

 

 

 

------------------------------------------------------------------------------------------

index部分代码

const listProps = {
    list: list,
    //loading: loading.effects['customerProtectLog/queryBase'],
    pagination:pagination,
    location,
    currentType:currentType,
    onChange (page) {
     。。。

  }



return (
    <Page>
      <Row>
        <Button icon="left" className={styles.returnIcon} > <Link to="/customer/protection">ddss</Link></Button>
      </Row>
      <div className="card-container">
        <Tabs>
          <TabPane tab="ddss" key="1">
            <Tabs onChange={onBaseClick}>
              <TabPane tab={<span>ddss<br></br><span className={styles.logTabsTitle} >ddss</span> </span>} key="1" >
                <Row >
                  <LogFilter record={{}} onOk={queryBase} >
                    <Button style={{ backgroundColor: "#96DB4A", border: 0, marginRight: 10 }} type="primary"><Icon type="search" />{var0}</Button>
                  </LogFilter>
                  <Button style={{ backgroundColor: "#68B6FF", border: 0, paddingLeft: 5 }} type="primary" onClick={() => { dispatch({ type: 'customerProtectLog/exportFile', payload: { id: 1, name: "ddss" } }); }}> <Icon type="arrow-up" />导出</Button>
                </Row>
                <Row>
                  <List{...listProps}/>
                </Row>
              </TabPane>
 </Tabs>
          </TabPane>
 </Tabs>
      </div>
    </Page >
  )

 

这里调用了list文件，代码如下：

return (
    <Table
      {...listProps}
      dataSource={list}
      className={classnames({ [styles.table]: true })}
      bordered
      scroll={{ x: 100 }}
      columns={getColumns()}
      //simple
      rowKey={record => record.timestamp + '' + record.module + '' + generalKey()}
      //  components={getBodyWrapper}
      pagination={{
        simple: false,
        current: listProps.pagination.current,
        total: listProps.pagination.total,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showSizeChanger: true,
        pageSize: listProps.pagination.pageSize,
        showTotal: (count = listProps.pagination.total) => {
          return '共' + count + '条数据'
        },
        onChange: (page,currentType) => {
        },

      }}

    />

  )

 

这里算是半个闭环，就是总结给自己看得；

其他关于pagination可以在官网上查到；