ag-grid-angular 显示行号

ag-Grid是一个强大的开源数据表格库，适用于Angular、React等前端框架。在Angular版本中，如果你想要显示行号（索引），你可以通过配置列定义来实现。首先，你需要安装`ag-grid-angular`库，然后在你的组件中设置列模板。下面是一个简单的示例：

import { Component } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';

@Component({
  selector: 'app-your-component',
  template: `
    <ag-grid-angular
      #agGridComponent
      [columnDefs]="columnDefs"
      [rowData]="rowData"
    ></ag-grid-angular>
  `,
})
export class YourComponent {
  columnDefs = [
    { headerName: 'Row Number', field: 'rowIndex', cellRendererParams: { suppressMenu: true }, width: 50 },
    // ...其他列定义
  ];
  rowData = [
    { id: 1, name: 'Row 1', data: {} },
    { id: 2, name: 'Row 2', data: {} },
    // ...
  ];

  getRowNode(row) {
    return this.agGridComponent.api.getRowNode(row.id);
  }
}

在这个例子中，`columnDefs`数组的第一个元素定义了一个新的列，它将显示每个行的行号。`cellRendererParams`用于隐藏默认的菜单功能，因为行号通常不需要用户交互。

如果你想动态地获取行号，可以添加`getRowNode`函数，当需要获取特定行的行号时，调用这个函数并传入行的id。