Vue3 Composition API SFC中AG Grid自定义过滤器注册问题求助

问题背景 #

使用Vue3 Composition API（script setup）结合AG Grid Vue3时，自定义的YearFilter过滤器未生效，AG Grid提示无法找到该组件，默认使用TextFilter。

解决步骤 #

1. 完善自定义过滤器组件（Options API格式） #

将自定义过滤器补全为完整的Vue单文件组件（YearFilter.vue），必须实现AG Grid要求的过滤器接口方法：

<template>
  <div class="year-filter">
    <div>Select Year Range</div>
    <label>
      <input type="radio" name="year" v-model="year" @change="updateFilter" value="All"/> All
    </label>
    <label>
      <input type="radio" name="year" v-model="year" @change="updateFilter" value="2010"/> Since 2010
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      year: 'All',
      params: null
    };
  },
  methods: {
    // AG Grid必须的初始化方法，接收过滤器参数
    agInit(params) {
      this.params = params;
    },
    updateFilter() {
      this.params.filterChangedCallback();
    },
    doesFilterPass(rowParams) {
      // 处理“All”选项，避免误过滤
      return this.year === 'All' || rowParams.data.year >= 2010;
    },
    isFilterActive() {
      return this.year === '2010';
    },
    getModel() {
      return this.year === '2010' ? { year: '2010' } : null;
    },
    setModel(model) {
      this.year = model?.year || 'All';
    }
  }
};
</script>

<style scoped>
.year-filter {
  padding: 10px;
}
.year-filter label {
  display: block;
  margin: 5px 0;
}
</style>

2. 在Composition API中注册自定义过滤器 #

在使用AG Grid的页面（list.vue）中，通过frameworkComponents属性将自定义过滤器注册到AG Grid，而非Vue的组件注册系统：

<template>
  <ag-grid-vue 
    ref="agGrid" 
    style="width: 100%; height: 80vh;" 
    class="ag-theme-alpine" 
    rowModelType="infinite"
    rowSelection="multiple" 
    animateRows="true" 
    :columnDefs="columnDefs" 
    :defaultColDef="defaultColDef"
    :frameworkComponents="frameworkComponents" <!-- 注册自定义组件 -->
    @grid-ready="onGridReady"
  ></ag-grid-vue>
</template>

<script setup>
import { AgGridVue } from 'ag-grid-vue3';
import YearFilter from '../shared/YearFilter.vue';

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

// 映射自定义组件，供AG Grid查找
const frameworkComponents = {
  YearFilter: YearFilter
};

const columnDefs = [
  // 注意field需对应数据中的年份字段，而非id
  { headerName: 'Year', field: 'year', width: 150, filter: 'YearFilter' },
];

const defaultColDef = {
  filter: true,
};

const onGridReady = (params) => {
  // 示例：加载测试数据
  params.api.setRowData([
    { id: 1, year: 2009 },
    { id: 2, year: 2015 },
    { id: 3, year: 2020 }
  ]);
};
</script>

3. 关键注意事项 #

• 必须实现AG Grid接口方法：agInit是AG Grid初始化过滤器的核心方法，缺少会导致组件无法接收参数而失效；doesFilterPass、isFilterActive等方法是过滤器逻辑的必要部分。
• 字段匹配：列定义中的field必须对应数据源中的年份字段，否则过滤器无法获取到正确的行数据。
• 组件注册方式：AG Grid的自定义组件需通过frameworkComponents传递，而非Vue的components选项，这是AG Grid框架组件的专属注册方式。

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