react中封装二次Ant Design的table组件

// 带详情跳转的表格组件
import React, { useEffect } from 'react'
import PropType from 'prop-types'
import { Table } from 'antd'
import style from './style.less'

function TableList(props) {
  const { columns, tableData = {}, rowKey, changeRoute, turnPage, rowClassName, loading, hasPadding, paginationOption, scroll } = props
  return (
    <div className={style.container} style={hasPadding ? { padding: '0 32px 32px' } : { padding: '' }}>
      <Table
        columns={columns}
        loading={loading}
        dataSource={tableData && tableData.data && tableData.data.length ? tableData.data : []}
        scroll={scroll}
        rowKey={rowKey + Date.now()}
        rowClassName={rowClassName ? `${style.tableRowClick}` : ''}
        pagination={tableData && tableData.page ? {
          hideOnSinglePage: true,
          pageSize: tableData.page ? tableData.page.size : 0,
          total: tableData.page ? tableData.page.total : 0,
          onChange: turnPage,
          current: tableData.page ? (tableData.page.start / tableData.page.size + 1) : 0,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: () => `总共${tableData.page ? tableData.page.total : 0}条`,
          ...paginationOption
        } : false}
        onRow={record => {
          return {
            onClick: changeRoute.bind(this, record)
          }
        }}
      />
    </div>
  )
}

TableList.propTypes = {
  columns: PropType.array,
  tableData: PropType.object,
  rowKey: PropType.string,
  changeRoute: PropType.func,
  turnPage: PropType.func,
  rowClassName: PropType.bool,
  scroll: PropType.bool,
  loading: PropType.bool,
  hasPadding: PropType.bool,
  paginationOption: PropType.object,
}

TableList.defaultProps = {
  columns: [],
  tableData: {
    data: [],
    page: {}
  },
  loading: false,
  rowKey: 'id',
  changeRoute: () => { },
  turnPage: () => { },
  rowClassName: false,
  paginationOption: {},
  scroll: {},
  hasPadding: true
}

export default TableList

文件中使用：

<TableList
   columns={columns}
// 注意data是一个数组 page是页码对象 参考组件要求
   tableData={{ data, page: "" }}
   hasPadding={false}
   loading={tabLoading}
   turnPage={(page, pageSize) => {
                // 获取数据
                props.getCheckList(params, page, pageSize);
              }}
   scroll={{
              y: 400,
           }}
       />