JeecgBoot中BasicTable表格自定义合计行内容的实现方案

在JeecgBoot 3.7.0版本中，BasicTable组件提供了表格合计行功能，但默认仅支持统计当前页面数据。本文将详细介绍如何实现自定义合计行内容，特别是需要调用接口获取全部查询条件下数据之和的场景。

问题背景

BasicTable组件的合计行功能默认只能计算当前页面显示的数据总和。但在实际业务中，我们经常需要统计符合当前查询条件的所有数据总和，而不仅仅是当前页面的数据。

解决方案

方案一：同步获取合计数据

1. 在查询前获取合计数据 在用户点击查询按钮时，先调用获取合计数据的接口，将结果保存在全局变量中，然后再进行常规的表格数据查询。

2. 在onSummary中使用预存数据 在表格的summaryFunc配置中使用预先获取的合计数据，而不是在onSummary方法中异步获取。

// 示例代码
let totalData = {};

// 查询按钮点击事件
const handleSearch = async () => {
  // 先获取合计数据
  const res = await getTotalData(searchParams);
  totalData = res.data;
  
  // 再获取表格数据
  loadData(searchParams);
};

// 表格配置
const tableConfig = {
  summaryFunc: () => {
    return {
      amount: totalData.amountTotal
    };
  }
};

方案二：使用summaryData属性

1. 动态更新summaryData 在获取到表格数据的同时，获取合计数据并更新summaryData。

// 示例代码
const [summary, setSummary] = useState([]);

const loadData = async (params) => {
  // 获取表格数据
  const tableRes = await getTableData(params);
  // 获取合计数据
  const totalRes = await getTotalData(params);
  
  setData(tableRes.data.records);
  setSummary([{
    amount: totalRes.data.amountTotal
  }]);
};

// 表格配置
const tableConfig = {
  summaryData: summary
};

注意事项

1. 避免异步操作 onSummary方法中不支持异步操作，因此不能在方法内部直接调用接口获取数据。

2. 数据一致性 确保合计数据的查询条件与表格数据的查询条件完全一致，避免数据不一致的情况。

3. 性能考虑 如果数据量很大，合计数据的计算可能会影响性能，建议在后端实现合计逻辑。

最佳实践

对于需要显示跨页合计的场景，推荐采用以下流程：

1. 用户输入查询条件
2. 前端先发送合计数据请求
3. 收到合计数据后存储在状态中
4. 发送常规表格数据请求
5. 表格渲染时使用预存的合计数据

这种方案既能保证数据的准确性，又能避免在表格渲染过程中进行异步操作导致的问题。

通过以上方法，可以灵活地在JeecgBoot项目中实现各种复杂的表格合计需求，满足不同业务场景下的数据展示要求。