antd分页组件左侧加上下载等操作按钮

最新推荐文章于 2024-04-26 22:44:17 发布

Icon_酱

最新推荐文章于 2024-04-26 22:44:17 发布

阅读量563

点赞数 2

分类专栏：前端 js React 文章标签：前端 react

本文链接：https://blog.csdn.net/yyticon/article/details/119327412

版权

js 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

前端

12 篇文章 1 订阅

订阅专栏

React

1 篇文章 0 订阅

订阅专栏

非Tabel布局展示

<div style={{ margin: "16px 0px", display: "flex", justifyContent: "space-between" }} 
    <div>
    {/* 在这里加上操作按钮 */}
        <Button style={{ marginLeft: 16 }} onClick={downloadFiles}  type="primary"> 下载</Button>
    </div>
    <Pagination total={total} current={currentPage} showTotal={showTotal} onChange={changePage} />
</div>

效果图：

Tabel布局展示：

如果需要用antd的table组件的话，就需要在Table组件里面加上pagination={false}

主要代码段：

ReactDOM.render(
  <div>
    <Table columns={columns} dataSource={data} pagination={false} />
    <div
      style={{margin: "10px 0px",display: "flex",
      justifyContent: "space-between"}}
    >
      <div>
        <Button style={{ marginLeft: 16 }} type="primary">
          下载
        </Button>
      </div>
      <div>
        <Pagination total={total} current={currentPage} />
      </div>
    </div>
  </div>,
  document.getElementById("container")
);

效果图：