MUI DataGrid初始化filterModel后快速筛选失效问题求助

问题根源 #

当手动控制filterModel（受控模式）时，若未保留快速筛选对应的quickFilterValues和quickFilterLogicOperator字段，DataGrid无法识别快速筛选的输入，导致功能失效。快速筛选的逻辑依赖这两个字段生成全局过滤条件。

解决方案步骤 #

1. 初始化包含快速筛选字段的filterModel #

确保初始的filterModel包含快速筛选相关字段，避免后续更新时丢失：

const initialFilterModel = {
  items: [], // 自定义列筛选条件
  quickFilterValues: [], // 快速筛选输入值数组
  quickFilterLogicOperator: 'and' // 多关键词的逻辑关系：and/or
};
const [filterModel, setFilterModel] = useState(initialFilterModel);

2. 受控模式下正确合并filterModel更新 #

在onFilterModelChange或自定义筛选更新逻辑中，保留原有快速筛选字段，仅更新需要修改的部分：

const handleFilterModelChange = (newFilterModel) => {
  setFilterModel(prev => ({
    // 保留原有快速筛选配置
    ...prev,
    // 合并新的筛选条件（包括列筛选和快速筛选的更新）
    items: newFilterModel.items,
    quickFilterValues: newFilterModel.quickFilterValues,
    quickFilterLogicOperator: newFilterModel.quickFilterLogicOperator
  }));
};

如果是自定义的筛选逻辑（比如手动添加列筛选条件），更新时也要保留快速筛选字段：

const addCustomFilter = () => {
  setFilterModel(prev => ({
    ...prev,
    items: [...prev.items, { columnField: 'name', operatorValue: 'contains', value: 'test' }]
  }));
};

3. 确保启用快速筛选功能 #

在DataGrid组件中添加enableQuickFilter属性，开启快速筛选：

<DataGrid
  rows={rows}
  columns={columns}
  filterModel={filterModel}
  onFilterModelChange={handleFilterModelChange}
  enableQuickFilter // 必须开启此属性
  // 其他配置项
/>

验证逻辑 #

完成上述配置后，快速筛选的输入会自动同步到filterModel.quickFilterValues，自定义列筛选条件保存在filterModel.items中，DataGrid会同时应用这两部分筛选逻辑，实现功能共存。

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