HTML根据主键合并单元格：动态表单处理与渲染

在HTML开发中，合并单元格是一项常见的需求，尤其是在创建动态表单时，为了展示或组织数据可能需要根据特定的键（主键）来合并重复的单元格。这个特定的代码片段主要展示了如何在Angular应用中实现这一功能，使用了lodash库中的_.uniqWith函数来去重主键，并根据每个唯一的键值（htxzGuid）进行合并操作。 首先，定义了一个名为`dataSet`的数组用于存储处理后的数据结构，其中每个元素包含`htxzGuid`、`tdGdxm`数组以及`rowspan`属性。`colOrowSpan`方法接收一个`TdGdxm`类型的数组作为输入参数，这个数组代表原始的数据源。 在方法内部，通过`_.uniqWith`函数去除数组中基于`htxzGuid`的重复项，然后遍历这个去重后的`distinctKey`数组。对于每个唯一的关键字`t`，找到原始数据中所有与之匹配的条目，将其重新封装到`dataSetOne`对象中。`htxzGuid`字段保留为唯一标识，`tdGdxm`字段收集所有相同`htxzGuid`的其他属性，而`rowspan`字段设置为这些重复条目的数量。 接下来，将处理后的`dataSetOne`对象添加到`this.dataSet`数组中，这样我们就有了按主键分组并合并单元格的数据结构。 在模板部分，使用`*ngFor`指令嵌套两个循环来呈现合并后的数据。外层循环遍历`dataSet`数组，计算`rowSpan`值（包括当前行和所有子行），并将`htxzGuid`显示在一个带有`rowSpan`属性的`<td>`元素中。内层循环遍历`dataSetOne`中的`tdGdxm`数组，分别展示日期、其他属性如`gdZmj`、`tdYt`和`jzMj`，最后一列使用`colspan="2"`合并相邻的单元格。 总结来说，这段代码演示了如何在动态表单中利用Angular和lodash库实现根据主键合并单元格的功能，通过处理数据和模板渲染，实现了数据的高效展示和组织。这对于构建可维护且易于理解的表格布局尤其有用。