igx Grid已按日期排序，如何在日期变更的行之间插入分割线？

你可以通过igx Grid的rowClasses动态行类绑定能力实现该需求，不需要额外插入DOM元素，直接用样式实现和官方divider一致的分割线效果，具体步骤如下：

步骤1：定义分割线样式 #

在组件样式文件中新增自定义行类，样式对齐Ignite默认分隔线规范，可根据业务需求自行调整：

.date-change-divider {
  border-top: 1px solid #e2e2e2;
}

步骤2：编写Typescript判断逻辑 #

在组件类中编写行类匹配规则，判断当前行和上一行的日期是否发生变更：

import { ViewChild } from '@angular/core';
import { IgxGridComponent, IgxGridRow } from 'igniteui-angular';

// 你的行数据类型示例，可根据实际业务调整
interface IGridRow {
  date: Date;
  // 其他业务字段
}

export class YourGridComponent {
  // 获取igx Grid实例
  @ViewChild('gridRef', { static: true }) grid: IgxGridComponent;

  // 动态行类规则
  public rowClassRules = {
    'date-change-divider': (row: IgxGridRow, rowIndex: number) => {
      // 第一行不需要添加上分割线
      if (rowIndex === 0) return false;
      // 取当前行和上一行的日期
      const currentDate: Date = row.data.date;
      const prevRowDate: Date = this.grid.getRowByIndex(rowIndex - 1).data.date;
      // 注意日期对象不能直接用==比较，转时间戳对比值
      return currentDate.getTime() !== prevRowDate.getTime();
    }
  };

  // 你的表格数据源
  public gridData: IGridRow[] = [];
}

步骤3：模板绑定规则 #

在igx-grid标签上绑定定义好的行类规则即可，原有列定义不需要修改：

<igx-grid 
  #gridRef
  [data]="gridData"
  [rowClasses]="rowClassRules"
  <!-- 其他原有grid配置保留 -->
>
  <igx-column field="date" header="Date" dataType="date"></igx-column>
  <igx-column field="otherField" header="Some stuff"></igx-column>
</igx-grid>

特殊场景适配 #

如果你的表格开启了分页功能，需要额外处理分页后第一行的日期对比逻辑：在分页切换事件中存储上一页最后一条数据的日期，判断当前页第一行时，和存储的上一页末尾日期对比即可。

内容的提问来源于stack exchange，提问作者user12424500