基于antd,自定义table的footer

1,453 阅读1分钟

1.table自定义footer,目的==>将分页功能和其它功能都放在table尾部进行展示,需要将pagination设置为false,否则会在table底部出现默认的分页

`

   const renderInlineFooter = () => {
    return (
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Button
          onClick={batchDeleteFun}
          disabled={selectedRowKeys.length > 0 ? false : true}
        >
          批量删除
        </Button>
        <Pagination {...pagination}></Pagination>
      </div>
    );
  };
  
   const pagination = {
    showSizeChanger: true,
    showQuickJumper: true,
    total,
    onChange: onPageChange,
    showTotal: () => `共有${total}条`,
    pageSize: pageSize,
    current: pageNum,
   };

   <Table
      rowKey={(record) => record.id}
      columns={columns}
      rowSelection={rowSelection} //选中事件
      dataSource={textList}
      pagination={false}
      footer={renderInlineFooter}
    />
    
    

`