vben-admin table表格统计 合计行数据?

作者站长头像
站长
· 阅读数 20

html

<BasicTable @register="registerTable">
    <template #action="{ record }">
      <TableAction
        :actions="[
          {
            label: '查看',
            tooltip: '查看',
          },
        ]"
      />
    </template>
 </BasicTable>
    const [registerTable, { reload, updateTableDataRecord }] = useTable({
      title: '列表',
      api: getApi,
      rowKey: 'id',
      columns: columns,
      ellipsis: false,
      pagination: false,
      showSummary: true,
      useSearchForm: true,
      showTableSetting: false,
      bordered: true,
      summaryFunc(val) {
        console.log('计算合计', val)
        return val;
      },
      actionColumn: {
        width: 60,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
      },
    });

后台返回的数据如下：

let item = [
 { name: '测试', a: 20,b: 11, c: 15 },
 { name: '测试1', a: 15,b: 1, c: 7 },
 { name: '测试2', a: 10,b: 6, c: 6 },
 { name: '测试3', a: 5,b: 0, c: 5 },
 { name: '测试4', a: 5,b: 0, c: 2 },
 { name: '测试5', a: 6,b: 20, c: 0 },
]

然后想把表格底部增加一行：把字段 a b c 的数据相加求和

麻烦各位大佬们帮我看看，是不是在summaryFunc 这个方面里面写逻辑，然后数据怎么放在BasicTable 的底部显示一行。

回复
1个回答
avatar
test
2024-06-19
summaryFunc(param) {
  const { columns, data } = param;
  const sums = {};
  
  // 遍历所有列，找出需要合计的列
  columns.forEach(column => {
    if (['a', 'b', 'c'].includes(column.dataIndex)) {
      // 初始化合计值为0
      sums[column.dataIndex] = 0;
      // 遍历所有行数据，累加对应字段的值
      data.forEach(row => {
        if (!isNaN(row[column.dataIndex])) {
          sums[column.dataIndex] += Number(row[column.dataIndex]);
        }
      });
    }
  });
  
  // 返回合计数据对象
  return sums;
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容