如何隐藏Ag-Grid中的排序顺序指示器？（AgGrid 15.0.0场景）

刚好我之前处理过类似的AgGrid排序序号问题，结合你用的15.0.0版本，给你几个实用的解决方案：

方案一：CSS直接隐藏（最简单高效） #

AgGrid v15中，表头的排序数字会被包裹在带有ag-header-cell-sort-order类的元素里，直接通过CSS隐藏这个元素就能解决问题，不管是初始多列可排序的状态，还是其他场景都适用：

/* 全局样式或组件内样式 */
.ag-header-cell-sort-order {
    display: none !important;
}

这个方法不需要修改任何业务逻辑，几行CSS就能快速搞定，推荐优先尝试。

方案二：自定义表头组件（灵活定制） #

如果需要对表头做更多自定义调整（比如修改排序图标、调整布局），可以通过自定义Angular表头组件来完全控制表头内容，主动去掉排序数字的渲染：

1. 创建自定义表头组件 #

import { Component } from '@angular/core';
import { IHeaderAngularComp } from 'ag-grid-angular';
import { IHeaderParams } from 'ag-grid-community';

@Component({
  template: `
    <div class="ag-header-cell-label">
      <!-- 显示列名 -->
      <span class="ag-header-cell-text">{{ params.displayName }}</span>
      <!-- 仅显示排序图标，去掉数字 -->
      <span class="ag-header-icon" *ngIf="params.sort">
        <i [class]="params.sort === 'asc' ? 'ag-icon ag-icon-sort-asc' : 'ag-icon ag-icon-sort-desc'"></i>
      </span>
    </div>
  `,
  styles: [`
    /* 可按需调整样式 */
    .ag-header-cell-label {
      display: flex;
      align-items: center;
    }
  `]
})
export class CustomSortHeaderComponent implements IHeaderAngularComp {
  params!: IHeaderParams;

  agInit(params: IHeaderParams): void {
    this.params = params;
  }
}

2. 在模块中注册组件 #

import { NgModule } from '@angular/core';
import { AgGridModule } from 'ag-grid-angular';
import { CustomSortHeaderComponent } from './custom-sort-header.component';

@NgModule({
  declarations: [CustomSortHeaderComponent],
  imports: [
    AgGridModule.withComponents([CustomSortHeaderComponent])
  ],
  exports: [CustomSortHeaderComponent]
})
export class YourFeatureModule {}

3. 在列定义中使用自定义表头 #

// 你的组件中的列定义
columnDefs = [
  {
    headerName: '用户名称',
    field: 'userName',
    sortable: true,
    headerComponent: 'customSortHeaderComponent' // 指定自定义组件
  },
  {
    headerName: '创建时间',
    field: 'createTime',
    sortable: true,
    headerComponent: 'customSortHeaderComponent'
  }
  // 其他列同理
];

补充说明 #

你提到的“仅1列支持排序时不显示数字，多列可排序时显示，点击排序后消失”是AgGrid的默认行为——它用数字提示用户当前可进行多列排序（即使你设置了suppressMultiSort=true，初始状态下还是会显示这个提示）。上面的两种方案都能彻底去掉这个数字提示，根据你的需求选择即可。

内容的提问来源于stack exchange，提问作者user2297996