antd table合并相同单元格问题

Question

业务需要要合并表格中的相同内容
后台返回了相同内容的次数具体显示在dataSource

const columns = [
    {
        title: '编号',
        dataIndex: 'rank',
        key: 'rank',
        render:(val,row,index)=>{
            const obj = {
                children:value,
                props:{}
            }
            //判断maxRank(后台返回相同内容出现的次数)的次数
            if(row.maxRank>0){
                obj.props.rowSpan = row.maxRank
            }else{
                obj.props.rowSpan = 0
            }
            return obj
            
        }
    },
    {
        title: '名字',
        dataIndex: 'name',
        key: 'name',
    }, 
    {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
    },
];

dataSource内容:

const data = [
    {
        key:0,
        rank:'1',
        name:'aa',
        age:20,
        maxRank:3,//后台返回的相同内容出现的次数
    },
    {
        key:1,
        rank:'1',
        name:'aa',
        age:20,
        maxRank:0,//不需要合并的会表示0
    },
    {
        key:2,
        rank:'1',
        name:'aa',
        age:20,
        maxRank:0,
    },
    {
        key:3,
        rank:'2',
        name:'bb',
        age:22,
        maxRank:0,
    },
]

问题来了： 根据columns中判断的话dataSource中的maxRank有大于0的，表格能成功合并。但是如果dataSource中的maxRank都是等于0（则没有重复项）就会出现单元格不显示，我了解到obj.props.rowSpan = 0相当于不渲染单元格 我的判断方式是不是有错误或者还需要添加某些判断?或者还有其他实现方案？

Answer 1

你需要把“编号”这一列第 2 行第 3 行的rowSpan设为 0

Answer 2

这里有详细的说明

Answer 3

解决了么 我也遇到了这个问题

Answer 4

我觉得，不需要判断，直接写obj.props.rowSpan = row.maxRank。这样应该可以，你试一下

Answer 5

我今天也遇到了这个问题，这里记录下，也方便其他同学吧。我们也是返回的每一条数据里面含有所以的字段。返回的数据增加了是否合并，和合并的行数

{FirMerge: false, FirMergeCnt: null, SedMerge: true, SedMergeCnt: 1, case: "test",class: "统计",func: "支付统计",id: 25}
{FirMerge: true, FirMergeCnt: 2, SedMerge: true, SedMergeCnt: 1, case: "test",class: "统计",func: "支付统计",id: 25}

数据结构是这样的
前端处理的方式

    const rsdkFuncColumns = [
      {
        title: '分类', dataIndex: 'class', render: (value, row, index) => {
          const obj = {
            children: value,
            props: {},
          };
          if (row.FirMerge) {
            obj.props.rowSpan = row.FirMergeCnt;
          } else {
            obj.props.rowSpan = 0;
          }
          return obj;
        }
      },
      {
        title: '功能', dataIndex: 'func', render: (value, row, index) => {
          const obj = {
            children: value,
            props: {},
          };
          if (row.SedMerge) { //是否合并，相同数据只有第一个是true,其他的是false.
            obj.props.rowSpan = row.SedMergeCnt;//第二列合并单元格数
          } else {
            obj.props.rowSpan = 0;
          }
          return obj;
        }
      },
      ]

obj.props.rowSpan = 0; 表示不渲染。
具体的可以参考文档
ant-design table