需求

最近在做一个功能，需要在表格内展示数据，动态合并值相同单元格，大概是下图的样子

百度的解决方案基本都是比较上下数据是否一致来决定是否合并，当遇到null值或数据中有不连续但是重复数据是会出问题，导致表格单元格不渲染或多渲染，修改一下算法在此记录

修改后遇到null后单元格内为空，不会错位，且分页不会出现问题

版本

Ant Design版本 1.5.0
官方文档的合并单元格演示
https://www.antdv.com/components/table-cn/#components-table-demo-colspan-and-rowspan

实现

tableColumns: [{
  title: '第一列',
  dataIndex: 'num',
  customRender: (text, record, index) => {
    const obj = {
      children: text !== null ? text : '',
      attrs: {}
    }
    obj.attrs.rowSpan = this.mergeCells(text, this.tableData, 'num', index)
    return obj
  }
}, {
  title: '第二列',
  dataIndex: 'name',
  customRender: (text, record, index) => {
    const obj = {
      children: text !== null ? text : '',
      attrs: {}
    }
    obj.attrs.rowSpan = this.mergeCells(text, this.tableData, 'name', index)
    return obj
  }
}]


/**
  * 单元格合并处理
  * @param text 当前单元格的值
  * @param data 当前分页所有数据
  * @param key 当前列的dataIndex
  * @param index 当前数据所在下标
  * @returns {number} 待合并单元格数量
  */
 mergeCells(text, data, key, index) {
   // 上一行该列数据是否一样
   if (index !== 0 && text === data[index - 1][key]) {
     return 0
   }
   let rowSpan = 1
   // 判断下一行是否相等
   for (let i = index + 1; i < data.length; i++) {
     if (text !== data[i][key]) {
       break
     }
     rowSpan++
   }
   return rowSpan
 }

抱歉完整源代码不能贴出来，基本处理方式都在这里了，下面是我的最终处理结果