Ant设计表行合并基于数据而不是索引值

Question

 {
    title: 'Home phone',
    colSpan: 2,
    dataIndex: 'tel',
    render: (value, row, index) => {
      const obj = {
        children: value,
        props: {},
      };
      if (index === 2) {
        obj.props.rowSpan = 2;
      }
      // These two are merged into above cell
      if (index === 3) {
        obj.props.rowSpan = 0;
      }
      if (index === 4) {
        obj.props.colSpan = 0;
      }
      return obj;
    },
  },

在基于索引值rowspan大小的dis示例中，我们可以根据以前的列数据来做吗（如果有两个John Brown，那么行跨度应该是2）？所以基本上我们需要通过对行进行排序和比较行值来确定行跨度大小。

Answer 1

https://stackblitz.com/edit/react-bubauz?file=index.js 我可以给你一个名称列的想法，它可以帮助你。 如果要合并名称列：

首先您需要对表格数据进行排序。然后创建 Set()。并且你需要在 useEffect() 中明确设置。

const names = new Set();

{
  title: 'Name',
  rowSpan: 1,
  dataIndex: 'name',
  render: (value, row, index) => {
    const obj = {
      children: value,
      props: {}
    };
    
    if (names.has(value)) {
      obj.props.rowSpan = 0;
    } else {
      const occurCount = tableData.filter((data) => data.name === value).length;
      
      obj.props.rowSpan = count;
      names.add(value);
    }

    return obj;
  }
}