Antd Pro 数据汇总结果展示

更新日期: 2021-10-28 阅读次数: 177 字数: 432 分类: ReactJS

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

展现形式

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

爱评论不评论