Vue中使用Ag Grid时如何阻止agColumnsToolPanel显示指定列？

嘿，这个需求我之前也碰到过，在Vue环境下的Ag Grid里要把foo和bar列从Columns ToolPanel里藏起来，只留x列让用户操作，其实有两种简单又靠谱的实现方式，看你哪种更适配你的场景：

方法一：直接在列定义中配置（静态隐藏） #

这是最直接的方式，只需要在你想隐藏的列定义里加上suppressColumnsToolPanel: true属性，这样这些列就不会出现在ToolPanel中，自然无法被用户修改可见性。

Vue代码示例（Vue3） #

<template>
  <ag-grid-vue
    :columnDefs="columnDefs"
    :rowData="rowData"
    :modules="modules"
    :toolPanelShow="true"
    class="ag-theme-alpine"
  ></ag-grid-vue>
</template>

<script setup>
import { AgGridVue } from 'ag-grid-vue3';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

// 列定义：给foo和bar列加上隐藏配置
const columnDefs = [
  { field: 'x', headerName: 'X列' },
  { field: 'foo', headerName: 'Foo列', suppressColumnsToolPanel: true },
  { field: 'bar', headerName: 'Bar列', suppressColumnsToolPanel: true },
];

// 示例行数据
const rowData = [
  { x: 'x1', foo: 'foo1', bar: 'bar1' },
  { x: 'x2', foo: 'foo2', bar: 'bar2' },
];

const modules = [];
</script>

<style scoped>
.ag-theme-alpine {
  height: 400px;
  width: 100%;
}
</style>

如果是Vue2环境，只需要把script部分改成传统的export default写法即可，列定义的配置逻辑完全一致。

方法二：自定义ToolPanel显示列（动态控制） #

如果你需要动态控制哪些列显示在ToolPanel中（比如根据用户权限、业务场景切换），可以通过gridOptions里的getMainPanelItems函数来过滤列。

Vue代码示例（Vue3 + 企业版ToolPanel） #

<template>
  <ag-grid-vue
    :columnDefs="columnDefs"
    :rowData="rowData"
    :modules="modules"
    :gridOptions="gridOptions"
    :toolPanelShow="true"
    class="ag-theme-alpine"
  ></ag-grid-vue>
</template>

<script setup>
import { AgGridVue } from 'ag-grid-vue3';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
// 企业版需要引入ToolPanel模块
import { ToolPanelModule } from '@ag-grid-enterprise/tool-panel';

const columnDefs = [
  { field: 'x', headerName: 'X列' },
  { field: 'foo', headerName: 'Foo列' },
  { field: 'bar', headerName: 'Bar列' },
];

const rowData = [
  { x: 'x1', foo: 'foo1', bar: 'bar1' },
  { x: 'x2', foo: 'foo2', bar: 'bar2' },
];

const modules = [ToolPanelModule];

const gridOptions = {
  // 自定义ToolPanel主面板的列项，只保留field为x的列
  getMainPanelItems: (params) => {
    return params.items.filter(item => item.colId === 'x');
  },
};
</script>

<style scoped>
.ag-theme-alpine {
  height: 400px;
  width: 100%;
}
</style>

关键说明 #

• 方法一适合静态场景，一劳永逸；方法二更灵活，支持动态调整。
• 无论哪种方式，设置后foo和bar列都不会出现在Columns ToolPanel中，用户无法通过ToolPanel修改它们的可见性。
• 如果使用的是Ag Grid社区版，基础的ToolPanel已经支持方法一；方法二需要企业版的ToolPanel模块支持。

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