拆分需求

1. 使用了 sula 的 Table 组件
2. Table 组件可以多选
3. 选中其中几行数据，并点击“导出CSV”按钮
4. 获取到选中的数据，按照理想的格式导出 .csv 文件

页面截图

页面部分截图
点击导出CSV按钮后，自动生成文件和下载到本地
用excel打开，完美~

详细代码

import React, { useState } from 'react'
import { Table } from 'sula'
import { CSVLink } from 'react-csv'

export default function Test(){
  const [cvsLoading, setCsvLoading] = useState(false)
  const [selectedData, setSelectedData] = useState([])

   // 导出的CSV文件的头部
  const csvHeaders = [
    { label: '用户编号', key: 'id' },
    { label: '用户名', key: 'name' },
    { label: '积分', key: 'point' },
  ]
  
  // 点击导出CSV按钮触发
  const onClickCvs = (ctx) => {
    // 给按钮loading，防止用户多次重复点击
    setCsvLoading(true)
    // 通过 sula 的 API 获取到选中的表格数据
    const selectedRows = ctx.table.getSelectedRows()

    // 转换成Excel导出的格式
    const csv = data.map((item) => {
      // 只要这三个数据，其他不要了，所以得map一下
      const { id, name, point } = item
      return {
        id,
        name,
        point
      }
    })

    // 保存好这个数据
    setSelectedData(csv)
    // 通过 sula 的 API 取消所有选中的
    ctx.table.clearRowSelection()
    // 关闭loading
    setCsvLoading(false)
    return true
  }

  const config = {
    rowKey: 'id',
    initialSelectedRowKeys: [],
    rowSelection: {},
    leftActionsRender: (ctx) => {
      // 要获取ctx 上下文数据，所以只能用函数自定义的形式
      return (
         <Button loading={cvsLoading} type="primary">
            // 是的，嵌套在Button组件里
            <CSVLink
              filename={`${new Date().getTime()}.csv`}
              data={selectedData}
              headers={csvHeaders}
              onClick={() => {
                const result = onClickCvs(ctx)
                // 根据 onClickCvs(ctx) 的返回值来决定是否生成 .csv 文件并下载到本地
                return !!result
              }}
            >
              导出CSV
            </CSVLink>
          </Button>
      )
    },
    columns: [
      {
        title: '用户编号',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '用户名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '性别',
        dataIndex: 'gender',
        key: 'gender',
      },
      {
        title: '分数统计',
        dataIndex: 'point',
        key: 'point',
      },
    ],
    remoteDataSource: {
      url: '这里没写',
      method: 'GET',
      convertParams({ params }) {
        return {
          // ...params,
        }
      },
      converter({ data }) {
        return {
          list: data,
          total: data.length,
        }
      },
    },   
  }
}