AG-Grid：如何通过编程实现列组展开/折叠的按钮？

核心思路 #

直接操作表格组件的列分组状态，通过按钮触发批量切换逻辑，无需依赖透视面板。以下是主流表格库的实现示例：

示例1：AG Grid

1. 添加触发按钮

<button onclick="toggleAllColumnGroups()">切换所有列组展开/折叠</button>

2. 编写切换逻辑

function toggleAllColumnGroups() {
  // 获取当前所有列组的状态
  const groupState = gridApi.getColumnGroupState();
  // 判断当前是否全展开
  const isAllExpanded = groupState.every(item => item.expanded);
  
  // 批量设置相反状态
  const newState = groupState.map(item => ({
    ...item,
    expanded: !isAllExpanded
  }));
  
  gridApi.setColumnGroupState(newState);
}

注：需确保已通过gridApi获取到AG Grid的实例引用

示例2：Element-Plus Table（Vue3）

1. 添加按钮

<el-button @click="toggleAllGroups">切换所有列组展开/折叠</el-button>

2. 编写切换函数（假设列配置为ref响应式数据）

import { ref } from 'vue';

// 列配置示例，包含分组列
const columns = ref([
  {
    label: '基础信息',
    expand: true,
    children: [
      { label: '姓名', prop: 'name' },
      { label: '年龄', prop: 'age' }
    ]
  },
  // 更多分组列...
]);

function toggleAllGroups() {
  columns.value.forEach(col => {
    if (col.children) col.expand = !col.expand;
  });
}

通用逻辑 #

如果是自定义表格组件，核心步骤为：

• 找到所有包含子列的分组列标识（如children属性）
• 记录当前分组的展开状态（如expand字段）
• 批量切换所有分组的状态并更新表格配置

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