简介：antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

1. 表格根据某个字段进行合并行

问题描述：一个表格需要根据某个字段进行合并行。
实现思路：请求数据成功时，通过自定义方法对数据进行遍历，获取一个对象，该对象包含所需的某个字段的开始索引和总个数，最后在配置 Table 的 column 属性时在 render 函数中进行判断从而实现合并行。
核心代码：

  1. // utils.ts
  2. /**
  3.  * 根据某个字段获取合并表格数据
  4.  * @param data 数组
  5.  * @param key  主键
  6.  * return temp {value: 重复次数, start: 开始的索引}
  7.  */
  8. export const calcTableMergeRow = (data: Array<any>, key: String) => {
  9.   const temp = {};
  11.   data.forEach((v, i) => {
  12.     const item = v?.[`${key}`];
  14.     if (!temp.hasOwnProperty(item)) {
  15.       temp[item] = { value: 1, start: i };
  16.     } else {
  17.       temp[item].value += 1;
  18.     }
  19.   });
  21.   return temp;
  22. };
  1. // jsx 组件
  2. import React, { useState } from 'react';
  3. import ProTable from '@ant-design/pro-table';
  4. import { getData } from './service';// 封装umi的 request 请求
  5. import { calcTableMergeRow } from '@/utils/utils';
  7. export default (() => {
  8.     // 处理合并表格数据
  9.   const [resultData, setResultData] = useState({});
  11.   // 表格 column 配置
  12.   // 此处以字段"ruleCategory"为演示
  13.   const columns = [
  14.     {
  15.       title: '规则大类',
  16.       dataIndex: 'ruleCategory',
  17.       render: (ruleCategory, _, index) => {
  18.         const obj = { children: ruleCategory, props: { rowSpan: 0 } };
  19.         const temp = resultData[ruleCategory];
  21.         if (index === temp?.start) {
  22.           obj.props.rowSpan = temp.value;
  23.         }
  25.         return obj;
  26.       }
  27.       // ...其他列配置
  28.     }
  29.   ];
  31.   // 此处省略其他配置
  32.   return (
  33.     <ProTable
  34.       columns={columns}
  35.       request={params => getData(params)}
  36.       postData={data => { setResultData(calcTableMergeRow(data, 'ruleCategory')); return data }}
  37.     />
  38.   );
  39. });