用ts写一个antd表格合并器

使用方式

下面是个React的例子

const arr = [
  {
    id: 'id-1',
    name: 'a',
    age: 18
  },
  {
    id: 'id-2',
    name: 'a',
    age: 19
  },
  {
    id: 'id-3',
    name: 'b',
    age: 19
  },
  {
    id: 'id-4',
    name: 'a',
    age: 18
  },
  {
    id: 'id-7',
    name: 'a',
    age: 18
  }
];
type DataType = typeof arr;

export default function App(){
  const [dataSource, setDataSource] = useState<DataType>([]);
  const tableMergerer = useTableMergerer<DataType>();
    const columns: ColumnsType<DataType[number]> = [
    {
      title: 'mergeIdx',
      render(dom, row, idx) {
        return tableMergerer.render('index', `name-${row.name}`, idx);
      }
    },
    {
      title: '姓名',
      dataIndex: 'name',
      render: (dom, row, idx) => {
        return tableMergerer.render(dom, `name-${row.name}`, idx);
      }
    },
    {
      title: '年龄',
      dataIndex: 'age',
      render: (dom, row, idx) => {
        return tableMergerer.render(dom, `age-${row.age}`, idx);
      }
    },
    {
      title: 'index',
      render(value, record, index) {
        return index + 1;
      }
    }
  ];
  
  useEffect(() => {
    setDataSource(arr);
    tableMergerer.setMergeData(arr, 'id', 'name', 'age');
  }, []);
    return (
    <div>
      Dashboard
      <Table columns={columns} dataSource={dataSource} rowKey="id" pagination={false} />
    </div>
  );
}

效果如下：

使用方式也很简单 只需几个步骤：

1. 调用useTableMergerer创建hook实例
2. 调用实例上的setMergeData方法，传入dataSource，主键，需要合并的字段
3. 调用实例上的render方法渲染内容

实现思路

代码在这里，后面再把实现思路补上。