美文网首页React
sula 的 actionsRender 中使用 react-c

sula 的 actionsRender 中使用 react-c

作者: Lia代码猪崽 | 来源:发表于2020-11-05 20:42 被阅读0次

拆分需求

  1. 使用了 sulaTable 组件
  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,
        }
      },
    },   
  }
}

相关文章

  • sula 的 actionsRender 中使用 react-c

    拆分需求 使用了 sula 的 Table 组件 Table 组件可以多选 选中其中几行数据,并点击“导出CSV”...

  • sula带你十分钟完成crud

    起步 本文将从umi搭建项目开始,帮助你在项目中轻松运用sula。 1、先找个文件夹建个空目录 2、通过umi官方...

  • 生活||下午很热闹

    O1 下午时分,四姨、四姨父来到我们家,还有sula与Selina. 好不热闹!Selina现在像个小大人,也争着...

  • 金钱的意识

    苏世微信上发了一个红包,寻找解决问题的方法,没点开退款回到他微信上,于是发了一句话说,sula你这个骗子,...

  • 重逢

    从科潘到乌提拉岛,必须在圣佩德罗苏拉换车,圣佩德罗苏拉(San Pedro Sula)是洪都拉斯第二大城市,也是世...

  • Suki和Sula的早教游戏笔记读后感

    主要内容:主要记录安潇为两个女儿设计的174个早教游戏 01 你要培养什么样的孩子? 在决定生孩子之前,我做了很久...

  • Python中 ==,is的使用

    元组 字符串 都是同一个内存地址is 是比较两个引用是否指向了同一个对象(地址引用比较)。== 是比较两个对象是否...

  • Java中的this使用

  • Runtime的使用中

    Runtime也就是我们通常所说的"运行时",是iOS开发过程中的一个不得不说的话题,基本大厂面试或多或少都会问到...

  • kotlin 中“in”的使用

    文章目录 前言 in 介绍 in 使用 总结 前言 for(i in 0..100),在 前面的 for 循环文章...

网友评论

    本文标题:sula 的 actionsRender 中使用 react-c

    本文链接:https://www.haomeiwen.com/subject/lgbavktx.html