AG Grid：框架组件缺少isFilterActive()方法问题求助

使用ag-grid-community@^29.3.3 + ag-grid-vue3 + Vue3组合式API开发自定义多选列过滤器时，勾选选项后出现Framework component is missing the method isFilterActive()警告，且列头不显示已应用过滤的状态标识。

问题核心原因 #

AG Grid的自定义过滤器组件必须暴露指定方法给Grid实例，但在Vue3的<script setup>语法中，内部定义的函数默认是组件私有，Grid无法访问到isFilterActive等核心方法，这是警告的直接原因。同时代码中还存在多处逻辑错误，导致过滤状态识别和过滤功能异常。

解决方案及修正代码 #

关键修改点 #

• 用defineExpose将AG Grid要求的过滤器方法暴露给Grid实例
• 修正isFilterActive的激活判断逻辑
• 适配多选场景，修复doesFilterPass的行数据匹配逻辑
• 调整getModel的模型返回逻辑，确保符合Grid要求
• 优化setModel的状态赋值逻辑，避免触发错误的更新流程

修正后的完整代码 #

<template>
  <div>
    <div class="custom-filter-wrapper">
      <div class="custom-filter-body">
        <label
          v-for="option in params.values"
          :key="option.value"
          class="options"
        >
          <input
            type="checkbox"
            :value="option"
            v-model="filterState"
            @change="updateFilter()"
          />
          {{ option }}
        </label>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
const props = defineProps<{ params: any }>();
const { field } = props.params.colDef;
const filterState = ref<any[]>([]);

// 判断过滤器是否激活：有选中项则返回true
const isFilterActive = () => {
  return filterState.value.length > 0;
};

// 通知Grid过滤条件发生变更
const updateFilter = () => {
  props.params.filterChangedCallback();
};

// 判断当前行数据是否符合过滤条件
const doesFilterPass = (params: { data: any }) => {
  // 无过滤条件时默认放行所有行
  if (filterState.value.length === 0) return true;
  // 检查行数据字段值是否存在于选中的过滤列表中
  return filterState.value.some(item => item === params.data[field]);
};

// 获取过滤模型：有选中项时返回模型，否则返回undefined
const getModel = () => {
  return filterState.value.length > 0 ? { state: filterState.value } : undefined;
};

// 从Grid恢复过滤状态
const setModel = (model: { state: any[] } | null) => {
  if (model == null) {
    filterState.value = [];
  } else {
    filterState.value = model.state;
  }
  // 恢复状态后通知Grid更新视图
  updateFilter();
};

// 暴露AG Grid所需的过滤器方法，让Grid能够访问到
defineExpose({
  isFilterActive,
  doesFilterPass,
  getModel,
  setModel
});
</script>

各修改点说明 #

1. defineExpose暴露方法：这是解决isFilterActive警告的核心操作，确保AG Grid能正确识别过滤器组件的核心方法。
2. isFilterActive逻辑修正：改为判断选中项数组长度，只有当存在过滤条件时才返回true，让Grid能正确识别过滤激活状态，显示列头的过滤标识。
3. doesFilterPass适配多选：使用some方法实现多选匹配逻辑，修复了原代码中直接将行数据与数组比较的错误。
4. getModel逻辑调整：反转原代码的返回条件，符合AG Grid对过滤模型的要求（无过滤条件时返回undefined）。
5. setModel优化：直接修改过滤状态的响应式值，再触发Grid更新，避免原代码中错误的参数传递逻辑。

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