MUI X Datagrid(v7.10.0) singleSelect无匹配值显示空白求助

针对你遇到的singleSelect列在值不在选项列表时显示空白的问题，有两种实用的解决方式：

方式一：用valueFormatter兜底显示原始值 #

在列定义中添加valueFormatter，判断当前值是否能在Materials中找到匹配项，找不到就直接返回原始值：

field: 'Code',
headerName: 'Code',
width: 200,
editable: true,            
type: 'singleSelect',             
valueOptions: Materials,
valueFormatter: (params) => {
  // 查找匹配的选项
  const matchedOption = Materials.find(opt => opt.value === params.value);
  // 有匹配就显示label，无匹配显示原始值
  return matchedOption ? matchedOption.label : params.value;
}

这个方法不影响编辑模式的下拉选择，仅在查看模式下做兜底处理。

方式二：自定义renderCell区分查看/编辑模式 #

如果需要更精细的控制，可以自定义单元格渲染逻辑，仅在查看模式下处理空白问题，编辑模式保留默认的下拉组件：

首先导入对应的编辑组件：

import { GridEditSingleSelectCell } from '@mui/x-data-grid';

然后修改列定义：

field: 'Code',
headerName: 'Code',
width: 200,
editable: true,            
type: 'singleSelect',             
valueOptions: Materials,
renderCell: (params) => {
  if (params.mode === 'view') {
    const matchedOption = Materials.find(opt => opt.value === params.value);
    return <span>{matchedOption ? matchedOption.label : params.value}</span>;
  }
  // 编辑模式使用默认的singleSelect编辑器
  return <GridEditSingleSelectCell {...params} />;
}

补充说明 #

• 确保Materials状态是最新的，避免因闭包问题导致匹配逻辑出错；
• 若Materials是异步加载的，要保证数据加载完成后再渲染表格，或者在匹配逻辑中处理空数组的情况；
• 之前使用getOptionValue和getOptionLabel导致全空白，大概率是函数写法有误，正确写法应为：

  getOptionValue: (option) => option.value,
  getOptionLabel: (option) => option.label
  

  但这两个函数仅作用于编辑模式的下拉选项，无法解决查看模式的空白问题，仍需结合上述方法使用。

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