Angular material table collapse/expand 完成 table 所以只有 header 可见

Question

我的页面上有很多material table，为了方便浏览我想在点击[=时制作一个完整的table collapse/expand 18=]（或 header 内的小按钮）。我找到了很多关于如何展开 table 行的示例，但我需要折叠完整的 table.

Answer 1

参考：https://www.freakyjolly.com/expand-collapse-single-or-multiple-rows-in-angular-98-material-table-multiple-single/#.XvT6fSgzZPY

Answer 2

我只是想在垫子扩展面板中使用垫子table。

我试了一下，相信能满足你的要求。

请检查Stackblitz是否满足您的要求。

Answer 3

解决方案：

点击折叠时，我将一个空数组分配给那个table的数据源。单击展开时，我将原始数组重新分配给 table 的数据源。这样，包含 table 总计的页眉和页脚单元格仍然可见，但内部单元格不可见。

像下面的代码应该允许这种行为：

collapse(index: number) {
if (this.contracts[index].tabledatasource.data.length == 0) {
  this.contracts[index].tabledatasource = new MatTableDataSource(this.stockArray[index]);
} else {
  this.contracts[index].tabledatasource = new MatTableDataSource([]);
}


}

Angular material table collapse/expand 完成 table 所以只有 header 可见

Angular material table collapse/expand complete table so only header is visible

angular-material

angular

mat-table