实现方案

1\首先，通常来说我们都是根据官方的示例来实现的，主要控制rowSpan来控制某一行占用几行的格子来实现。其中原理就是：rowSpan设置 0 的格子不会显示。

官方的合并案例:ant-design.gitee.io/components/…

但是，问题在于很多时候这种合并的需求中，需要合并的行数据是动态的，也就是说，这个值并不是固定的。

所以我们会遇到下面的问题：

如何给动态的数据合并行
分页的情况下如何避免样式错乱

实现代码：

我这边直接先弄一个小方法，用来合并数据相同的单元格。


/**
 * 合并相同的单元格
 * @param state
 * @param value
 * @param record
 * @param index
 * @returns
 */
export function TableCellMerge(
  list: any[],
  page: number,
  pageSize: number,
  record: any,
  field: string,
  index: number
) {
  // 处理列，相同数据则合并
  // 截取当前页的数据(主要就这一段)
  const start = page * pageSize - pageSize;
  const end = list.length > pageSize * page ? list.length - 1 : pageSize * page;
  // 截取后的数据
  const dealData = list.slice(start, end);

  // 处理rowSpan
  let rowSpan = 1;
  // 当检索到相同数据则返回
  let arr = dealData.filter((res) => {
    return res[field] == record[field];
  });
  if (index == 0 || dealData[index - 1][field] != record[field]) {
    rowSpan = arr.length; //相同数据长度
  } else {
    rowSpan = 0;
  }
  return rowSpan;
}

然后我们直接在 Table组件中的 columns 中配置使用即可.

这个是ANTD-PRO 的 PRO-TABLE组件配置。如果是普通的 table 组件是用 customRender 中返回。

 columns:[ {
      title: "编号",
      dataIndex: "id",
      width: 80,
      onCell: (item,index)=>({
      rowSpan: TableCellMerge(
        dataSource, //列表数据
        page, // 当前页码
        pageSize, //分页大小
        item,  //当前数据
        "id", //用作唯一标识的字段，合并时会检测字段是否一致
        index ?? 0 //当前下标
      ),
    }),
    },
    ...其他的配置
 ]

【ANTD】Table 组件如何实现合并行？

实现方案

实现代码：

Bye~