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 } }
@陈卧龙的博客