Vue3中AG-GRID自定义过滤：混合多条件AND与ID白名单OR逻辑

核心思路 #

直接用AG-Grid的外部过滤能力和内置过滤器结合，不用自定义每个列的过滤器，就能实现(所有内置过滤器通过) OR (id在地图选中列表)的逻辑，省心不少。

具体实现步骤 #

1. 给AG-Grid加外部过滤配置 #

在Vue组件的AG-Grid标签里添上这几个属性：

<ag-grid-vue
  :columnDefs="columnDefs"
  :rowData="rowData"
  :isExternalFilterPresent="isExternalFilterPresent"
  :doesExternalFilterPass="doesExternalFilterPass"
  @grid-ready="onGridReady"
  // 保留你原来的其他配置
></ag-grid-vue>

2. 维护地图选中的id列表 #

在组件里存好地图选出来的id，变化时通知表格重新过滤：

import { ref } from 'vue';

// 存地图选中的id数组
const selectedMapIds = ref([]);
// 存AG-Grid的API实例
const gridApi = ref(null);

// 地图选中行更新时调用这个方法
const updateMapSelected = (newIds) => {
  selectedMapIds.value = newIds;
  // 告诉表格过滤条件变了，重新算
  gridApi.value?.onFilterChanged();
};

// 表格初始化时拿到API
const onGridReady = (params) => {
  gridApi.value = params.api;
};

3. 写外部过滤的核心逻辑 #

这两个方法是关键，直接实现你要的混合过滤：

const isExternalFilterPresent = () => {
  // 只要地图选了行，外部过滤就生效
  return selectedMapIds.value.length > 0;
};

const doesExternalFilterPass = (node) => {
  // 核心逻辑：要么行过了所有内置过滤器，要么id在地图选中列表里
  return node.passedFilters || selectedMapIds.value.includes(node.data.id);
};

4. 额外注意点 #

• 内置过滤器变化时，AG-Grid会自动触发重新过滤，不用额外处理
• 确保你的行数据里id字段和地图选中的id格式一致（比如都是数字或字符串）

为啥这方法更省事 #

• 完全复用AG-Grid自带的所有列过滤器，不用挨个写自定义过滤逻辑
• 代码量少，逻辑集中，后期改需求也容易调整
• 精准匹配你要的(多条件AND) OR id在列表的过滤规则

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