React 合并行 RowSpan

十年河东，十年河西，莫欺少年穷

学无止境，精益求精

今儿分享一篇关于React Table 组件合并单元行的方法！

实例效果如下：

原则就是遇到相同的供方名称，就要做行合并！

思路如下：后端计算合并的行数，前端绑定即可！注：此算法通用

后端方法如下(RowSpan是返回LIst<Model>数据中Model的属性，用于前端绑定即可)：

if (data.list != null)
                {
                    for(int i = 0; i < data.list.Count; i++)
                    {
                        int index = GetIndex(data.list, i);
                        if (index == 0)
                        {
                            data.list[i].RowSpan = 1;
                        }
                        else
                        {
                            data.list[i].RowSpan = index+1;
                            i+= index;
                        }
                    }
                    //var lst = data.list.Select(A => A.RowSpan).ToList();
                }

GetIndex()方法为：

private int GetIndex(List<V_SM_R_SpClassifyModel> list,int i)
        {
            int num = 0;
            for (int j = i + 1; j < list.Count; j++)
            {
                if (list[i].SupplierName == list[j].SupplierName)
                {
                    num++;
                }
                else
                {
                    break;
                }
            }
            return num;
        }

根据以上算法，即可算出要合并的行

前端绑定如下：

{
      title: '供方名称',
      dataIndex: 'SupplierName',
      sorter: true,
      render: (value, row, index) => {

        const obj = {
          children: <a href='javascript:void(0)'>
            <Link target='_blank' to={`/supplier/info/${row.SupplierId}/${row.SpClassifyId}`}>
              {row.SupplierName}
              {
                row.IsDelayStorage
                  ? <span style={{ color: 'red' }}>（后入库）</span>
                  : null
              }
            </Link>
          </a>,
          props: { rowSpan: row.RowSpan },
        }
        return obj
      }
    }

@陈卧龙的博客