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可以在官網上查到；