Ant Design的Table合并单元格处理rowSpan

举例：将address相同的数据合并行

const result= [
  {
    key: '1',
    name: '胡彦斌1',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖2',
    age: 42,
    address: '西湖区湖底公园1号',
  },
    {
    key: '3',
    name: '胡彦祖2',
    age: 42,
    address: '西湖区湖底公园1号',
  },
    {
    key: '4',
    name: '胡彦祖6',
    age: 42,
    address: '西湖区湖底公园1号',
  },
    {
    key: '5',
    name: '胡彦祖5',
    age: 42,
    address: '西湖区湖底公园2号',
  },
    {
    key: '6',
    name: '胡彦祖4',
    age: 42,
    address: '西湖区湖底公园2号',
  },
];

！！！关键：处理数据，count

handleSpan(result) {
    result.forEach((ele) => {
    //给每行数据的count为1
      ele.count = 1;
      //项目中的代码，由于index无法作为table中的rowKey（没探究），所以写了个uuid，这个方法没放上来，自行百度
      ele.id = guid();
    });
    //关键==>遍历
    for (let i = 0; i < result.length; i++) {
      const element = result[i];
      for (let j = i + 1; j < result.length; j++) {
      //1、如果上一行与下一行address相等则合并(即将上一行的count+1，下一行的的count为0)，count就是rowSpan的值
        if (element.address=== result[j].address) {
          element.count++;
          result[j].count = 0;
          //3、这里是因为遍历到最后一条，不能跳出去，所以我们要结束所有的遍历
          if(j==result.length-1){
            return result;
          }
        } else {
        //2、如果到了不相等的一行则跳出j的遍历
        //这里减1是因为i的循环会+1,
          i = j - 1;
          break;
        }
      }
    }
    return result;
  }

然后是渲染数据字段

 allRender = (text, row, index) => {
    const obj = {
      children: text,
      props: {}
    };
    obj.props.rowSpan = row.count;
    return obj;
  };
  const columns = [
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
        render: (text, row, index) => {
          return this.allRender(text, row, index);
        }
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',

      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
    ];
//将id作为key也是关键
<Table
        bordered
        dataSource={this.props.result}
        columns={columns}
        rowClassName={(record, index) => {
          let className = 'light-row';
          if (index % 2 === 1) className = 'table-color-dust';
          return className;
        }}
        rowKey="id"
        pagination={false}
      />

需要注意的是：合并单元格的数据排序是连续的，所以最好从sql里查出来就order by一下，效果如下图