Antd Table 表格合并

把数据中相同的uid行合并展示

image.png

代码实现（React Hooks）

import React, { useState } from 'react';
import {  Table } from 'antd';
interface IProps {}

const Index: React.FC<IProps> = () => {
  const [dataList,setDataList] = useState<any[]>([]); // 列表数据
   /**
    * changeData(*，*)
    * 参数一：列表数据
    * 参数二：要合并的列名称
    */
  useEffect(() => {
     setDataList(changeData([这里是数据], 'uid'));
  },[])

  const columns: any = [
    {
      title: 'uid',
      dataIndex: 'uid',
      onCell: (_: any, index: any) => {
        return { rowSpan: _.rowSpan };
      },
    },
    {
       xxxxx此处省略一下，懂得都懂xxxxxxx
    },
  ];

  // 函数-合并单元格（各位看官看这里，重头戏在这里）
  const changeData = (data: any, field: any) => {
    let count = 0;
    let indexCount = 1;
    try {
      while (indexCount < data.length) {
        let item = data.slice(count, count + 1)[0];
        if (!item.rowSpan) {
          item.rowSpan = 1;
        }
        if (item[field] === data[indexCount][field]) {
          item.rowSpan++;
          data[indexCount].rowSpan = 0;
        } else {
          count = indexCount;
        }
        indexCount++;
      }
    } catch {}
    return data;
  };

  return (
    <Table columns={columns} dataSource={dataList} bordered />
  );
};

export default Index;

原文章链接 https://www.jianshu.com/p/150c02c4c8a6