antd table 增加底部合计行统计 灰太狼 2022-10-07 04:58 1956阅读 0赞 方法1:把合计行插入到数组中。 方法2:footer方式实现表格统计。 通过百度参考结合自己项目,做了变化。具体如下: **方法1:把合计行插入到数组中。** 1.列表数据: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70] 2、 合计行的数据合并到列表中(要做判断,如果没有数据,不显示) ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1] 3、table模块 ![\*\*加粗样式\*\*][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 2] 4、page 传参 //table与pagination组件之间的联动 //因为table表格每页显示的数据被pagenation分页默认的每页显示数pageSize所限制,默认为10,为了让合计行显示到页面上,需+1。 const _pageSize = totalList && totalList.length == 0 ? pcPagination.pageSize : pcPagination.pageSize + 1; //table表格需要获取的总数据,为了让table将后台获取数据和新增合计行数据全部显示出来,需重新计算总数。 const _total = totalList && totalList.length == 0 ? pcPagination.total : pcPagination.total + parseInt(pcPagination.total/pcPagination.pageSize) + 1 //分页设置 const paginationDefault = { ...pcPagination, showSizeChanger: true, current: pcPagination.current, total: _total, pageSize: _pageSize, //因为与后台规定每页获取的数据为10,而前端自定义追加了一条合计行,这导致当前table的每页数据为11条,所以需要手动将分页数据+1 //若是想显示为['10', '20', '30', '40'],则修改每页获取数据为9即可。 pageSizeOptions: ['11', '21', '31', '41','51','101'], //此处显示的是从后台获取的总数据数,合计行不在其中。 showTotal: () => `共${pcPagination.total}条记录` } let 4、model中传过来的合计行数据 model 中 page 要改成默认 10条,因为合计是作为一条数据 push 进去的,且每页都存在。后端实际返回的值是 10, 在页面中改成了 11 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 3] 效果图: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 4] **方法2:footer方式实现表格统计。** 1、table 表格中加一个 footer 属性,表头 showHeader 隐藏。 2、table 合计行(就是:footer 那行列表),每列的宽度要和上面列表宽度一样。 3、合计行要做判断,如果没有数据,不显示。 let status = pcDataSource && (pcDataSource.length == '0') ? {display: 'none'} : {display: 'block'}; 最终效果图: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 5] 界面UI代码: <Fragment> <EditTable resizable bordered loading={loading} rowKey="penetrationId" columns={columns} dataSource={pcDataSource} pagination={pcPagination} rowSelection={ { selectedRowKeys: selectedRows.map(n => n.penetrationId), onChange:onRowSelectChange, }} onChange={page => onChange(page)} scroll={ { x: 3400 ,y:450 }} footer={() => { return ( <EditTable bordered={false} showHeader={false} // table 的 columns 头部隐藏 columns={columns} dataSource={footerDatasSource} rowKey={record => Math.random()} pagination={false} scroll={ { x:3400 ,y:80 }} style={status} /> ) }} /> </Fragment> 遇到问题: 1.数据列过多时候表体滚动条、和合计行滚动条不能同时滚动。 componentDidMount() { let warp = document.getElementsByClassName("ant-table-body")[0]; // 添加滚动监听 warp.addEventListener('scroll', this.handleScroll); } //监听滚动事件 handleScroll = ()=>{ let warp = document.getElementsByClassName("ant-table-body")[0]; let wrapBottom = document.getElementsByClassName('ant-table-body')[1] warp.addEventListener("scroll",() => { wrapBottom.scrollLeft = warp.scrollLeft; },true) } // 组件将要卸载,取消监听window滚动事件 componentWillUnmount(){ window.removeEventListener('scroll', this.handleScroll); } 滚动效果同步: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 6] 隐藏合计行滚动条,并对其表格: .ant-table-footer .ant-table-body{ overflow: hidden !important; } .ant-table-footer{ padding-left: 46px; } [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]: /images/20221005/9b132486c4334417983bced0eabec6f6.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/fb274093d22f4245ae86224f323455fe.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/0c8cd1463d684dfd81c71d076da01123.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 3]: /images/20221005/6ccb98938c7441aab541aed3bc72525c.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 4]: /images/20221005/c67cef04b84648f6adf37d29054cfc6e.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 5]: /images/20221005/0a1e5717cb8a4b678533733ba59668dc.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 6]: /images/20221005/2a227f01b9e2414cbe212f9e4f19f361.png
还没有评论,来说两句吧...