本文介绍如何在 mui x datagrid（社区版）中，不依赖内置工具栏，而是通过点击自定义按钮精准导出**当前行（单条记录）**为 csv 文件，涵盖 api 调用、过滤逻辑与完整可复用代码示例。
MUI X DataGrid 提供了强大的 exportDataAsCsv 方法，但默认导出的是整个数据集。若需仅导出某一行（即用户点击操作所在的具体记录），关键在于：先获取该行 ID 或数据，再通过 getRowsToExport 选项动态筛选待导出行。
以下是一个完整、生产就绪的实现方案：
✅ 步骤一：创建支持单行导出的自定义按钮组件
import React from 'react';
import {
GridToolbarContainer,
GridCsvExportOptions,
useGridApiContext,
} from '@mui/x-data-grid';
import { Button } from '@mui/material';
import { FileDownload as FileDownloadIcon } from '@mui/icons-material';
interface SingleRowExportButtonProps {
rowId: string | number; // 当前行唯一标识（通常为 row.id）
}
const SingleRowExportButton = ({ rowId }: SingleRowExportButtonProps) => {
const apiRef = useGridApiContext();
const handleExportSingleRow = () => {
const exportOptions: GridCsvExportOptions = {
// 仅导出当前行：通过 getRowsToExport 返回包含指定 rowId 的数组
getRowsToExport: (api) => {
const allRows = api.getAllRowIds();
return allRows.filter((id) => id === rowId);
},
// 可选：隐藏 ID 列（如 rowId 是内部字段，无需导出）
fields: ['name', 'email', 'status'], // 显式指定导出字段（推荐）
// delimiter: ',', // 可选分隔符
// fileName: `record-${rowId}.csv`, // 自定义文件名（需配合额外逻辑）
};
apiRef.current.exportDataAsCsv(exportOptions);
};
return (
}
onClick={handleExportSingleRow}
sx={{ ml: 1 }}
>
导出本行
);
};
export default SingleRowExportButton;✅ 步骤二：在 renderCell 中集成该按钮（以操作列为例）
// 在 DataGrid 的 columns 配置中
{
field: 'actions',
headerName: '操作',
sortable: false,
renderCell: (params) => (
⚠️ 注意事项与最佳实践
- rowId 必须与 DataGrid 内部 id 类型一致：确保传入的 rowId 与 rows 数组中每项的 id 字段类型（string/number）完全匹配，否则 filter 将无法命中。
- 字段控制更安全：强烈建议显式声明 fields 选项，避免因列配置变更导致意外字段泄露（如敏感 ID、内部状态等）。
- 文件名定制需扩展逻辑：exportDataAsCsv 默认不支持动态 fileName。如需按行生成 record-123.csv，可结合 useCSVExport Hook 或原生 Blob + URL.createObjectURL 手动触发下载（进阶场景）。
- 性能提示：getRowsToExport 在大数据量下仍高效，因其仅做 ID 过滤，不序列化全量数据。
✅ 总结
通过组合 useGridApiContext、exportDataAsCsv 和 getRowsToExport 选项，你无需引入第三方库，即可在任意交互点（按钮、菜单、快捷键）精准导出单条记录为 CSV。该方案完全兼容社区版，代码轻量、逻辑清晰，是 MUI X DataGrid 定制化导出的标准实践。
