例如，我要在数据后台拉取一段时间的代理商交易记录，并进行金额数据合计。
展现形式
可以使用 Antd Pro ProTable 的"表格主体自定义"，该区域在 table 列表的上方，更醒目一些。
https://procomponents.ant.design/components/table#%E8%A1%A8%E6%A0%BC%E4%B8%BB%E4%BD%93%E8%87%AA%E5%AE%9A%E4%B9%89
相对 Ant Design Table 的"总结栏"，"表格主体自定义" 格式更灵活，更醒目。 关键的一点是，ProTable 并不支持总结栏，加上就报错，也可能是我用的不对。
https://ant.design/components/table-cn/#components-table-demo-summary
数据获取方式
前端的交互流程是，每次打开数据列表页，或者设置了搜索条件，点击查询，都应该在数据列表返回的同时， 返回统计结果。
而"表格主体自定义"的传入参数只能使用返回数据的 data 部分，不方便加汇总字段。
方案一，加接口
麻烦，过滤条件还要再支持一遍。
beforeSearchSubmit={(args) => {
if (args.DeviceId) {
setLineVisible(true);
(async (args) => {
let result = await getLineMetrics(args);
setLineData(result);
})(args);
} else {
setLineVisible(false);
}
return args;
}}
request={getMetrics}
tableExtraRender={(_, data) => (
<div>
{lineVisible &&
<Card>
<Line {...lineConfig}
data={lineData}
/>
</Card>
}
</div>
)}
(推荐) 方案二，原接口加数据字段
需要自定义 request 的返回结果处理逻辑。可以复用数据列表的逻辑。
https://procomponents.ant.design/components/table#request
const [count, setCount] = useState(0);
const [totalTime, setTotalTime] = useState(0);
request={async (
// 第一个参数 params 查询表单和 params 参数的结合
// 第一个参数中一定会有 pageSize 和 current ，这两个参数是 antd 的规范
params: T & {
pageSize: number;
current: number;
},
sort,
filter,
) => {
// 这里需要返回一个 Promise,在返回之前你可以进行数据转化
// 如果需要转化参数可以在这里进行修改
const msg = await getOrderTimes(params);
setCount(msg.total);
setTotalTime(msg.totalTime);
return {
data: msg.data,
success: msg.success,
total: msg.total,
};
}}
tableExtraRender={(_, data) => (
<Card>
<Descriptions size="small" column={3}>
<Descriptions.Item label="消费总时长">{totalTime}</Descriptions.Item>
<Descriptions.Item label="消费总次数">{count}</Descriptions.Item>
</Descriptions>
</Card>
)}
微信关注我哦 👍
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式