antd pro table 单元格 loading

前言：在protable单元格中增加loading，还真没思路，看render()方法的四个参数，感觉都用不上。

后来在朋友的帮助下用如下方法解决。

 

import React, { useState } from 'react';
import { Space, Spin, Table } from 'antd';
 
// 发空投loading
const [loading, setLoading] = useState(false)
const [currId, setCurrId] = useState(0)


const columns = [
  {
      title: '状态',
      width: '100px',
      key: 'status',
      dataIndex: 'status',
      ellipsis: true,
      hideInSearch: true, // 在查询表单中不展示此项
      render: (text, record, _, action)=> {
        const statusArr = ['', '未发放', '待确认', '发放成', '发放失败', '无效']
        return (loading && record.id === currId) ? <Spin indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />} /> : statusArr[record.status]
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  // ... 其他列
];
 


// 发空投
const onSendClick = async(item: any) => {
  setCurrId(item.id)
  setLoading(true)
  异步
  setLoading(false)
},
 

const App = () => {
  return <Table columns={columns} dataSource={data} />;
};
 
export default App;