MUI的DataGrid组件是否存在支持编辑功能的select类型列？

MUI DataGrid 没有内置select类型的编辑单元格，直接设置type: "select"不会生效，需要通过自定义编辑组件实现，具体实现步骤如下：

步骤1：实现自定义Select编辑组件 #

import { Select, MenuItem, FormControl } from '@mui/material';

// 自定义Select编辑单元格组件
const SelectEditCell = (props) => {
  const { id, value, field, api } = props;
  
  const handleChange = (event) => {
    // 实时更新编辑单元格的值
    api.setEditCellValue({ id, field, value: event.target.value });
  };

  return (
    <FormControl fullWidth size="small">
      <Select
        value={value || ''}
        onChange={handleChange}
        autoFocus
      >
        {/* 替换为你的业务预设选项，value值需和后续代码要求的存储格式完全一致 */}
        <MenuItem value="published">已发布</MenuItem>
        <MenuItem value="draft">草稿</MenuItem>
        <MenuItem value="archived">已归档</MenuItem>
      </Select>
    </FormControl>
  );
};

步骤2：在列配置中绑定自定义组件 #

在需要使用Select编辑的列定义中，通过renderEditCell属性绑定上面写好的自定义组件，可选配置renderCell优化非编辑状态下的显示效果：

const columns = [
  // 其他列配置省略
  {
    field: 'status',
    headerName: '内容状态',
    width: 150,
    editable: true, // 开启可编辑
    // 绑定自定义编辑组件
    renderEditCell: (params) => <SelectEditCell {...params} />,
    // 可选：优化普通状态下的显示，避免直接展示原始value值
    renderCell: (params) => {
      const statusLabelMap = {
        published: '已发布',
        draft: '草稿',
        archived: '已归档'
      };
      return statusLabelMap[params.value] || params.value;
    }
  }
];

扩展说明 #

• 如果需要动态加载选项，可将选项列表作为参数传入SelectEditCell组件，或在组件内部请求获取
• 如需支持多选，开启Select组件的multiple属性，同时对应调整值的存储、渲染逻辑即可
• 所有选项的value字段和后续代码要求的存储格式保持一致，即可完全避免用户输入错误的问题

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