首页 > 其他分享 >antd pro table 单元格 loading

antd pro table 单元格 loading

时间:2024-04-17 10:56:12浏览次数:31  
标签:status loading const pro 单元格 setLoading useState antd

前言:在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;

 

标签:status,loading,const,pro,单元格,setLoading,useState,antd
From: https://www.cnblogs.com/zccst/p/18140080

相关文章

  • Provider HAL 和 Device HAL3
    2.CameraProviderHAL和CameraDevice HAL32.1谷歌的Framework层定义了四个接口来与Hal3进行交互:ICameraProvider,  ICameraDevice,  ICameraDeviceSession,  ICameraDeviceCallbackMTK的Hal3当中定义了四个接口的实例: CameraProvid......
  • Python——cProfile(程序分析)
    程序分析可以系统性地分析程序的运行速度、内存使用情况等。cProfile是Python的分析器,用于测量程序的运行时间和程序内各个函数调用消耗的时间。importcProfiledefadd():total=0foriinrange(1,10000001):total+=icProfile.run('add()')'''......
  • 解决IDA Pro Warning:mssdk64_win7: No such file or directory
       最初我以为出现这个问题的原因是我本机没有安装Windows7sdk导致的,然后尝试安装了windows7sdk。发现并没有什么用。接着机缘巧合之下发现这里的mssdk64_win7并不是指windowssdk,而是指idapro使用的til文件。所以idapro报这个错误只是因为安装目录下缺失了这些文件,所以......
  • day12_我的Java学习笔记 (package包、权限修饰符_private+缺省+protected+public、fin
    1.包IDEA配置自动导包:2.权限修饰符同一个类中的,【private、缺省、protected、public】都可以访问同一个包中的其他类,【private】不可以访问,【缺省、protected、public】都可以访问不同包下的无关类,【private、缺省、protected】都不可以访问,只有【public......
  • 基于ProDiag的监控视图-LAD篇
    此篇的目的是对DroDiag的使用做一个回顾和加深。ProDiag是一个可选插件,小于25个使用点不需要授权,否则是需要授权的,另外它只支持1500PLC。优点:不需要组态报警随时在PLC侧修改,不影响HMI侧显示和运行监控类型比较多,而且可以自定义PLC触发报警,显示可以是HMI或者是WEB每一条报......
  • CF154C Double Profiles 题解
    CF154CDoubleProfiles题解思路解析题目说的很明白,求有多少个无序点对\((i,j)\),使得与\(i\)直接相连的点集与直接与\(j\)相连的点集完全相等。我们想到如果直接判断每个\(i,j\)肯定会超时,所以我们想把每一个与任意一点直接相连的点集进行压缩,可以想到使用字符串哈希的......
  • Uni-app的Prompt组件实现
    代码实现<!--prompt组件--><template> <view> <viewv-show="show"class="uni-mask":style="{top:offsetTop+'px'}"@touchmove.stop.prevent="maskMoveHandle"></view> <view......
  • 配置文件Profile
     分别写成4个文件后缀为yml自带的是properties文件,这个文件的格式不太实用,因此将其改成yml文件  yml文件是树形目录的形式,可以更清晰的看到各个配置的结构。 在application.yml中选择要使用哪个配置环境,是dev本地环境,还是test测试环境,还是产品上线的pro环境。 ......
  • antd 的ProTable 的列加上ellipsis属性后,react-resizable会无法拖动列
    1、我尝试在列中加入ellipsis为true后,让内容超出后,用省略号表示。{title:displayName,dataIndex:propName,key:newPropName,width:widthIndex//,ellipsis:true}但是这引发了另外的问题。react-resizable配置的列可拖动无效了。额外的情况:obj.fixed='......
  • 过程宏(proc-macro)
    优点增加代码的复用。性能。因为是在编译时生成,所以会得到更好的性能。没测试过,有待商榷过程宏的分类proc-macroproc-macro-deriveproc-macro-attribute构建过程宏的必要设置构建过程宏,要在cargo.toml里面设置一些参数,这是必须的。一般来说,过程宏必须是一个库,或者作为......