react+ts Antd 表格多选导出csv表格

1.下载

npm i react-csv --save

npm i @types/react-csv --save // 不是ts环境不用下

2.我是点击按钮批量导出Table选中的行

 const [RowKeys, setRowKeys] = useState<any[]>([]); // 选中行
 const exportData = useRef<any>([]) // 导出数据
 const [choiceMark, setChoiceMark] = useState(true); //批量导出按钮是否禁用
 const exportColumns = [{
 	label:"名称", //导出文件表名
 	key:"name" //对应数据的字段
}]
<Table
  columns={columns}
  dataSource={tableData}
  rowKey={(row, index: any) => index}
  rowSelection={{
   type: 'checkbox',
    ...rowSelection,
    }}
 />
 const rowSelection = {
selectedRowKeys: RowKeys,
   onChange: (selectedRowKeys: React.Key[], selectedRows: any) => {
     exportData.current = selectedRows 
     setRowKeys(selectedRowKeys || []);//给存储的赋值 外面用不着的话 可以把相关的RowKeys的都去掉
      if (selectedRows.length > 0) {
        setChoiceMark(false); //批量按钮不禁用
      } else {
        setChoiceMark(true);//禁用
      }
    },

// 导出按钮 我为了样式好写 在Button里写了一个CSVLINK 有需要的可以借鉴
<CSVLink
  data={exportData.current} //导出数据
  headers={exportColumns} //表格头部
  filename={formatMessage({id:'component.Statistics.OperationRecord'}) + '.csv'} //文件名称
>
  {formatMessage({ id: 'component.Statistics.BatchExport' })}
</CSVLink>

参考文件：https://www.npmjs.com/package/react-csv