Material Table 分页和 Rowspan 不工作

Question

我在使用 rowspan 对 material table 进行分页时遇到问题。 rowspan 属性绑定本身就可以正常工作。但是当我引入分页时，它会导致值的重复。例如id=5

的数据

{ id: 5, name: 'Boron', weight: 10.811, descriptions: ['row1'] },

输出看起来像

有什么办法可以避免这种情况吗？

请在此处找到 stackblitz link https://stackblitz.com/edit/angular-wudscb-9us1us?file=app%2Fapp.component.html

Answer 1

您可以使用 mat-paginator 作为组件（不是添加 this.dataSource.paginator = this.paginator; 否则使用 mat-paginator[=16= 的事件和属性]

但我建议您真的按“原样”显示 table。唯一的是“格式化”了最后一个单元格

  <ng-container matColumnDef="descriptions">
    <th mat-header-cell *matHeaderCellDef>Descriptions</th>
    <td mat-cell class="description-cell" *matCellDef="let data" >
      <div class="inner-cell" *ngFor="let desc of data.descriptions;let last=last" 
           [class.no-border]="last" >
        {{ desc }}
      </div>
    </td>
  </ng-container>

并调整 .css

td.mat-cell.description-cell{
  padding:0!important
}
.inner-cell{
padding-top: 14px !important;
padding-left: 16px !important;
padding-bottom: 14px !important;

border-bottom:1px solid rgba(0,0,0,.12);
}
.no-border{
  border-bottom:none
}

您可以在this stackblitz中看到。看到直接用了 dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);（不用transform你的数据

Material Table 分页和 Rowspan 不工作

Material Table with Pagination and Rowspan not working

angular

angular-material

mat-table

paginator