Vue中AG Grid列工具面板搜索筛选不显示问题求助

问题描述 #

我在Vue的AG Grid中尝试实现列工具面板的搜索筛选功能，参考官方文档及示例图后编写代码，但搜索筛选框始终不显示，以下是我的模板及脚本代码：

模板代码 #

<template>
<div>
<ag-grid-vue
style="width: 1270px; height: 175px"
class="ag-theme-alpine"
:columnDefs="columnDefs"
@grid-ready="onGridReady"
:defaultColDef="defaultColDef"
:autoGroupColumnDef="autoGroupColumnDef"
:pivotMode="true"
:sideBar="sideBar"
:rowGroupPanelShow="rowGroupPanelShow"
:pivotPanelShow="pivotPanelShow"
:rowData="rowData"
:alwaysShowHorizontalScroll="true"
:alwaysShowVerticalScroll="true">
</ag-grid-vue>

    </div>
</template>

脚本代码 #

<script>
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import { AgGridVue } from "ag-grid-vue3";
export default { 
  name: "WbCardDetail",
  components: { 
      AgGridVue,
 },
  setup() {
    return {
      columnDefs: [
        { headerName: "№", field: "position", filter: 'agTextColumnFilter', filterParams: {
            textMatcher: ({filter, value, filterText}) => {
                // custom matching logic that returns a boolean
                }
        } },
        { headerName: "Фото", field: "thumb", filter: 'agTextColumnFilter' },
        { headerName: "Цена ставки", field: "cpm", filter: 'agTextColumnFilter' },
        { headerName: "SKU", field: "id", filter: 'agTextColumnFilter' },           
      ],
      rowData: [
        { position: "1", thumb: "Photo", cpm: "120"},
      ],
      defaultColDef: {
        flex: 1,
        minWidth: 100,
        filter: true,
        sortable: true,
        enablePivot: true,
        enableValue: true,
        enableRowGroup: true,
        resizable: true,        
      }
    }
  },
   created() {
    this.autoGroupColumnDef = {
      minWidth: 200,
    };
    this.sideBar = {
      toolPanels: [
        {
          id: 'columns',
          labelDefault: 'Столбцы',
          labelKey: 'columns',
          iconKey: 'columns',
          toolPanel: 'agColumnsToolPanel',
          toolPanelParams: {
            suppressRowGroups: true,
            suppressValues: true,
            suppressPivots: true,
            suppressPivotMode: true,
            suppressColumnFilter: true,
            suppressColumnSelectAll: true,
            suppressColumnExpandAll: true,
          },
        },
      ],
      defaultToolPanel: 'columns',
    };
  },
}
</script>

问题原因 #

问题出在sideBar配置的toolPanelParams中，你设置了suppressColumnFilter: true，这个参数的作用是隐藏列工具面板中的搜索筛选框，因此搜索框无法显示。

修复方案 #

将toolPanelParams里的suppressColumnFilter改为false，或者直接移除该配置项即可。修复后的sideBar配置如下：

this.sideBar = {
  toolPanels: [
    {
      id: 'columns',
      labelDefault: 'Столбцы',
      labelKey: 'columns',
      iconKey: 'columns',
      toolPanel: 'agColumnsToolPanel',
      toolPanelParams: {
        suppressRowGroups: true,
        suppressValues: true,
        suppressPivots: true,
        suppressPivotMode: true,
        // 移除或改为false
        suppressColumnFilter: false,
        suppressColumnSelectAll: true,
        suppressColumnExpandAll: true,
      },
    },
  ],
  defaultToolPanel: 'columns',
};

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