移除Ag Grid React中agSetColumnFilter仅含2选项时的搜索文本框

实现方案 #

agSetColumnFilter未提供直接隐藏搜索框的配置项，但可通过以下两种实用方式实现需求：

方法1：CSS条件隐藏（快速生效）

利用Ag Grid的DOM结构，针对选项数量恰好为2的过滤器容器隐藏搜索框：

/* 匹配仅含2个选项的set过滤器，隐藏其搜索框 */
.ag-filter-body-wrapper:has(.ag-set-filter-item:nth-child(2):last-child) .ag-filter-search {
    display: none;
}

注：:has()选择器支持现代主流浏览器，如需兼容旧版浏览器，可通过JS判断选项数量后给容器添加自定义类，再用CSS隐藏。

方法2：自定义过滤器组件（灵活可控）

继承agSetColumnFilter实现自定义组件，在初始化时判断选项数量，动态控制搜索框显示：

1. 编写自定义过滤器组件：

import { AgSetColumnFilter } from 'ag-grid-react';

class CustomTwoOptionSetFilter extends AgSetColumnFilter {
    init(params) {
        super.init(params);
        // 获取过滤器的选项列表
        const filterOptions = this.model.getValues();
        // 选项数量≤2时隐藏搜索框
        if (filterOptions.length <= 2) {
            const searchElement = this.eGui.querySelector('.ag-filter-search');
            if (searchElement) searchElement.style.display = 'none';
        }
    }
}

2. 在列配置中使用该组件：

const columnDefs = [
    {
        field: 'status',
        filter: 'agSetColumnFilter',
        filterParams: {
            filterOptions: ['set'],
            filterComponent: CustomTwoOptionSetFilter
        }
    }
];

内容的提问来源于stack exchange，提问作者Praveen Rao Chavan.G