Vue中AG-Grid如何判断分组功能是否处于激活状态？

AG-Grid提供了两种直接的方式来判断当前行分组功能是否激活：

核心判断方法 #

方法1：使用columnApi.getRowGroupColumns() #

该API会返回当前所有被设置为分组依据的列组成的数组。如果数组长度大于0，说明分组功能处于激活状态，这是最简洁直接的判断方式。

方法2：使用gridApi.getColumnState() #

调用该方法会返回所有列的状态对象数组，其中每个列对象的rowGroupIndex属性表示该列是否被用于分组（值为>=0时表示处于分组状态）。通过检查是否存在这样的列，即可判断分组是否激活。

Vue项目中的代码示例 #

1. 先获取Grid API实例 #

在AG-Grid的grid-ready事件中保存gridApi和columnApi：

<template>
  <ag-grid-vue
    :columnDefs="columnDefs"
    :rowData="rowData"
    @grid-ready="handleGridReady"
    :enableRowGroup="true"
    :rowGroupPanelShow="'always'"
    class="ag-theme-alpine"
  ></ag-grid-vue>
</template>

<script>
export default {
  data() {
    return {
      gridApi: null,
      columnApi: null,
      columnDefs: [/* 你的列定义 */],
      rowData: [/* 你的行数据 */]
    };
  },
  methods: {
    handleGridReady(params) {
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
    }
  }
};
</script>

2. 编写判断函数 #

methods: {
  isGroupingActive() {
    // 方法1：推荐，直接获取分组列
    const groupedColumns = this.columnApi.getRowGroupColumns();
    return groupedColumns.length > 0;

    // 方法2：通过列状态判断
    // const columnStates = this.gridApi.getColumnState();
    // return columnStates.some(col => col.rowGroupIndex !== undefined && col.rowGroupIndex >= 0);
  }
}

3. 实时监听分组状态变化 #

如果需要实时感知分组状态的变化，可以监听column-row-group-changed事件：

<ag-grid-vue
  ...
  @column-row-group-changed="onGroupStateChange"
></ag-grid-vue>

data() {
  return {
    isGroupActive: false
  };
},
methods: {
  onGroupStateChange() {
    this.isGroupActive = this.columnApi.getRowGroupColumns().length > 0;
    // 这里可以执行分组状态变化后的逻辑
  }
}

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