如何在ag-grid@25.2.1客户端模型中动态按条件修改行组子项计数

要实现「行组仅含1行且该行全为空时隐藏计数，否则显示实际子项数」的需求，可通过自定义组行渲染逻辑动态控制计数显示：

1. 核心实现思路 #

• 编写工具函数判断单条数据是否所有字段为空
• 自定义组行内部渲染器，根据子行的数量和内容动态决定是否显示计数
• 在列定义中配置该自定义渲染器

2. 完整代码示例 #

<template>
  <ag-grid-vue 
    style="width: 100%; height: 100%;"
    class="ag-theme-alpine-dark"
    :columnDefs="columnDefs"
    @grid-ready="onGridReady"
    :rowData="getRowData()"
  >
  </ag-grid-vue>
</template>

<script>
export default {
  data() {
    return {
      gridApi: null,
      columnDefs: [],
      diffdata: [],
      rowdata: []
    };
  },
  computed: {
    getRowData() {
      return this.diffdata.length ? this.diffdata : this.rowdata;
    }
  },
  created() {
    this.colHeaders = this.myheaders(condition);
    this.initColumnDefs();
  },
  methods: {
    initColumnDefs() {
      // 工具函数：判断行数据是否所有字段为空（适配null/undefined/空字符串）
      const isRowAllEmpty = row => {
        return Object.values(row).every(val => val == null || val === '');
      };

      // 自定义组行内部渲染器
      const customGroupInnerRenderer = params => {
        const childRows = params.node.allLeafChildren;
        let countText = '';

        // 判断条件：子行数量为1，且该行全为空
        if (childRows.length === 1 && isRowAllEmpty(childRows[0].data)) {
          countText = '';
        } else {
          countText = ` (${childRows.length})`;
        }

        return `${params.value}${countText}`;
      };

      // 替换为你的实际列配置，这里以分组字段`category`为例
      this.columnDefs = [
        {
          field: 'category',
          rowGroup: true,
          hide: true,
          groupRowRendererParams: {
            innerRenderer: customGroupInnerRenderer
          }
        },
        // 其他业务列
        { field: 'column1' },
        { field: 'column2' }
      ];
    },
    onGridReady(params) {
      this.gridApi = params.api;
    },
    myheaders(condition) {
      // 你的列头生成逻辑
    }
  }
};
</script>

3. 关键细节说明 #

• params.node.allLeafChildren：获取当前组下的所有叶子节点（即子行数据），用于判断子行数量和内容
• isRowAllEmpty函数：可根据实际业务调整判断规则（比如忽略某些固定字段）
• 自定义渲染器完全控制组行显示内容，仅在符合条件时隐藏计数，其余场景保持默认计数逻辑

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