layui模板语言,渲染表格分组合并行

接到需要渲染表格全部内容的同时,根据相同分类合并行达到下面的效果

难点在于layui模板语言代码阅读性不高,html 的table合并仅第一行rowspan后续不需要添加该列,需要进行数量判断,有多行或者仅一行的判断.

1首先对数据进行分组

js:

let groupList =groupBy(res.data.AIKuQuoteList, function (item) {
		return [item.报价分类];//按照name进行分组
	});
	function  groupBy(array, f) 
    {
        debugger;
		const groups = {};        
        array.forEach(function (o) { //注意这里必须是forEach 大写
            const group = JSON.stringify(f(o));
            groups[group] = groups[group] || [];
            groups[group].push(o);
        });
        return Object.keys(groups).map(function (group) {
            return groups[group];
        }); 
    } 

2.分组之后会以分组字段的值为键,组成一个层级结构,进行渲染
关键在于集中查看代码是否缺漏,其次是三个判断,分组里数量大于1,是第一个则渲染rowspan,大于1不是0下标则不渲染合并列,其他情况正常渲染

<tbody class="thead">
									{{# layui.each(d, function(index, item){ }}
										
									{{#	var slength=item.length; }}

										{{#	layui.each(item,function (i,it){ }}

											{{#	if(index!=d.length-1&&it.lineType=="明细"){ }}

												{{#	if(slength>1&&i==0){ }}
																
																<tr>
																	<td>{{ it.空间名称 }}</td>
																	<td>{{ it.产品名称 }}</td>
																	<td rowspan='{{slength}}'>{{ it.报价分类 }}</td>
																	<td>{{ it.明细序号 }}</td>
																	<td>{{ it.部件名称 }}</td>
																	<td>{{ it.宽 }}</td>
																	<td>{{ it.深 }}</td>
																	<td>{{ it.高 }}</td>
																	<td>{{ it.数量 }}</td>
																	<td>{{ it.材料 }}</td>
																	<td>{{ it.颜色 }}</td>
																	<td>{{ it.单位 }}</td>
																	<td>{{ it.单位数 }}</td>
																	<td>{{ it.工艺费 }}</td>
																	<td>{{ it.单价 }}</td>
																	<td>{{ it.金额 }}</td>
																	<td>{{ it.折扣 }}</td>
																	<td>{{ it.折后金额 }}</td>
																</tr>
																

																{{#	}else if (slength>1){ }}
																<tr>
																	<td>{{ it.空间名称 }}</td>
																	<td>{{ it.产品名称 }}</td>
																	
																	<td>{{ it.明细序号 }}</td>
																	<td>{{ it.部件名称 }}</td>
																	<td>{{ it.宽 }}</td>
																	<td>{{ it.深 }}</td>
																	<td>{{ it.高 }}</td>
																	<td>{{ it.数量 }}</td>
																	<td>{{ it.材料 }}</td>
																	<td>{{ it.颜色 }}</td>
																	<td>{{ it.单位 }}</td>
																	<td>{{ it.单位数 }}</td>
																	<td>{{ it.工艺费 }}</td>
																	<td>{{ it.单价 }}</td>
																	<td>{{ it.金额 }}</td>
																	<td>{{ it.折扣 }}</td>
																	<td>{{ it.折后金额 }}</td>
																</tr>
														{{#	}else{ }}
															<tr>
																<td>{{ it.空间名称 }}</td>
																<td>{{ it.产品名称 }}</td>
																<td>{{ it.报价分类 }}</td>
																<td>{{ it.明细序号 }}</td>
																<td>{{ it.部件名称 }}</td>
																<td>{{ it.宽 }}</td>
																<td>{{ it.深 }}</td>
																<td>{{ it.高 }}</td>
																<td>{{ it.数量 }}</td>
																<td>{{ it.材料 }}</td>
																<td>{{ it.颜色 }}</td>
																<td>{{ it.单位 }}</td>
																<td>{{ it.单位数 }}</td>
																<td>{{ it.工艺费 }}</td>
																<td>{{ it.单价 }}</td>
																<td>{{ it.金额 }}</td>
																<td>{{ it.折扣 }}</td>
																<td>{{ it.折后金额 }}</td>
															</tr>
															{{#	} }}
															{{#	} }}
															{{#	 }); }}
									{{#	 });	}}
									<tr>
										<td colspan="16"></td>
										<td>合计</td>
										<td>{{ d[d.length-2][0].总计 }}</td>
									</tr>
								</tbody>