本文介绍如何在 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 定制化导出的标准实践。