Antd Pro 数据汇总结果展示

例如，我要在数据后台拉取一段时间的代理商交易记录，并进行金额数据合计。

展现形式

可以使用 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>
)}

tags: Ant Design Pro

关于作者 🌱

我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式