MUI DataGrid中getApplyQuickFilterFn仅对第一列生效问题求助

问题原因 #

你遇到的问题核心是：只有配置了getApplyQuickFilterFn的列才会被快速筛选纳入检查范围。如果仅给第一列添加了这个自定义函数，快速筛选只会对该列执行逻辑，其他列不会参与筛选判断，自然只会看到第一列的GridCellParams被打印。

解决方案 #

有两种方式实现多列共用相同的自定义快速筛选逻辑：

1. 给目标列逐个配置复用的筛选函数

先抽离通用的筛选逻辑函数，再给所有需要应用该筛选的列添加getApplyQuickFilterFn属性：

// 抽离通用快速筛选逻辑，处理值为null/undefined的情况
const getCommonQuickFilterFn = (filterItem) => {
  return (value) => {
    // 可选链避免空值报错，统一转为小写做模糊匹配
    return value?.toLowerCase().includes(filterItem.value.toLowerCase());
  };
};

// 列定义中给需要的列配置该函数
const columns = [
  {
    field: 'name',
    headerName: 'Name',
    width: 150,
    getApplyQuickFilterFn: getCommonQuickFilterFn,
  },
  {
    field: 'email',
    headerName: 'Email',
    width: 200,
    getApplyQuickFilterFn: getCommonQuickFilterFn,
  },
  // 其他需要筛选的列同理配置
];

2. 全局配置快速筛选逻辑（更高效）

如果希望所有列都应用相同的自定义筛选，无需逐个列配置，可以通过slotProps.quickFilter全局设置：

<DataGrid
  rows={rows}
  columns={columns}
  slotProps={{
    quickFilter: {
      getApplyQuickFilterFn: (filterItem) => {
        return (value) => {
          return value?.toLowerCase().includes(filterItem.value.toLowerCase());
        };
      },
    },
  }}
/>

这种方式下，所有列都会自动使用该自定义筛选逻辑，不需要单独给列添加配置。

验证效果 #

配置完成后，输入搜索内容时，所有目标列的GridCellParams都会被打印，筛选逻辑也会作用于所有指定列，实现多列模糊匹配的效果。

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