在Angular中使用ag-grid时如何设置行索引？

ag-grid 目前没有提供开箱即用的行索引/序号列官方配置项，你可以使用内置的行节点属性配合 valueGetter 实现，不需要提前往原始数据源中插入seq字段，实现成本远低于手动维护序号列：

实现代码 #

在你的列定义中直接新增序号列即可：

//  Angular 组件中 ag-grid 列定义示例
public columnDefs = [
  {
    headerName: '序号',
    width: 80,
    // 直接通过行节点的rowIndex属性获取索引，默认从0开始，+1即可实现从1开始计数
    valueGetter: params => params.node.rowIndex + 1,
    // 可根据需求选择是否关闭排序、筛选，避免操作后序号逻辑不符合预期
    sortable: false,
    filter: false,
    suppressMovable: true
  },
  // 后续为你的其他业务列定义
  { field: 'xxx', headerName: 'xxx' }
]

注意事项 #

• 如果表格开启了分页，需要全局连续序号的话，修改valueGetter逻辑即可：params.node.rowIndex + 1 + (当前页码 - 1) * 每页条数
• 增删行、拖拽调整行顺序后，序号会自动刷新，不需要额外写同步逻辑
• 如果需要排序、筛选后序号保持连续，不用关闭sortable和filter属性，计算逻辑会自动适配当前可见行的顺序

内容的提问来源于stack exchange，提问作者red-salad