antd table 增加底部合计行统计

方法1:把合计行插入到数组中。
方法2:footer方式实现表格统计。

通过百度参考结合自己项目,做了变化。具体如下:
方法1:把合计行插入到数组中。

1.列表数据:
在这里插入图片描述
2、 合计行的数据合并到列表中(要做判断,如果没有数据,不显示)
在这里插入图片描述
3、table模块
**加粗样式**
4、page 传参

  //table与pagination组件之间的联动
    //因为table表格每页显示的数据被pagenation分页默认的每页显示数pageSize所限制,默认为10,为了让合计行显示到页面上,需+1。
    const _pageSize = totalList && totalList.length == 0 ? pcPagination.pageSize : pcPagination.pageSize + 1;
    //table表格需要获取的总数据,为了让table将后台获取数据和新增合计行数据全部显示出来,需重新计算总数。
    const _tot
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,在你的表格中添加一个按钮,然后给它绑定一个点击事件。在点击事件中,你可以通过以下方式向表格中添加一数据: 1. 在你的组件状态中定义一个数组,用于保存表格中的数据; 2. 在点击事件中创建一个新的数据对象,并将其添加到数据数组中; 3. 更新组件状态以反映新的数据数组。 以下是一个示例代码,演示如何增加数据到 Antd 表格中: ``` import React, { useState } from 'react'; import { Table, Button } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, ]; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, ]; const App = () => { const [tableData, setTableData] = useState(data); const handleAddRow = () => { const newRow = { key: Date.now(), // 自动生成一个唯一的 key name: 'New Person', age: 18, address: 'New Address', }; setTableData([...tableData, newRow]); }; return ( <> <Button onClick={handleAddRow}>Add Row</Button> <Table columns={columns} dataSource={tableData} /> </> ); }; export default App; ``` 在上面的示例代码中,我们首先定义了一个 `tableData` 状态变量,用于保存表格中的数据。然后,在点击事件中,我们创建了一个新的数据对象 `newRow`,并将其添加到 `tableData` 中。最后,我们更新了组件状态,以反映新的数据数组。 注意,我们在 `newRow` 对象中添加了一个自动生成的 `key` 属性,以确保每数据都具有一个唯一的标识。这是 Antd 表格要求的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值