angular实现表头固定以及列固定的方法示例

Angular中实现表头固定和列固定的方法有很多种，以下是其中的一种方法示例：

1. 在表格中使用CSS样式实现表头固定

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in items">
      <td>{{item.col1}}</td>
      <td>{{item.col2}}</td>
      <td>{{item.col3}}</td>
    </tr>
  </tbody>
</table>

thead {
  position: sticky;
  top: 0;
  background-color: #fff;
}

2. 使用第三方库实现表头和列固定

可以使用一些第三方库，如ng2-table、ag-grid、ngx-datatable等，这些库提供了丰富的表格功能，包括表头和列的固定。

例如，使用ngx-datatable实现表头和列固定的示例：

<ngx-datatable
  class="material"
  [rows]="rows"
  [columns]="columns"
  [columnMode]="'force'"
  [headerHeight]="50"
  [footerHeight]="50"
  [rowHeight]="'auto'"
  [scrollbarV]="true"
  [scrollbarH]="true"
  [reorderable]="true"
  [columnResize]="true"
  [scrollHeight]="'500px'"
  [frozenColumns]="1"
  [frozenRows]="1">
</ngx-datatable>

其中，`[columnMode]="'force'"`表示强制使用固定列模式，`[frozenColumns]="1"`表示固定左侧的1列，`[frozenRows]="1"`表示固定顶部的1行。

这些库都有详细的文档和示例，可以根据具体需求选择使用。