当前位置: 首页 > news >正文

【react】react+es6+antd5.13.2+ts,antd表格的操作如何在父组件写?

react+es6+antd5.13.2+ts,antd表格的操作如何在父组件写?
我的子组件columns.tsx,只加表头,操作放在父组件。
columns.tsx的代码:

export const dataColumns = [{title: '项目成员',dataIndex: 'name',key: 'name',},{title: '可选账号',align: 'center',dataIndex: 'peopleUM',key: 'peopleUM',},{title: '状态',dataIndex: 'type',key: 'type',},{title: '工作',align: 'center',dataIndex: 'job',key: 'job',},{title: '范围',align: 'center',dataIndex: 'rankRange',key: 'rankRange',},{title: '供应商',dataIndex: 'supplier',key: 'supplier',},{title: '设备类型',dataIndex: 'deviceType',key: 'deviceType',},{title: '设备详情',dataIndex: 'deviceDetails',key: 'deviceDetails',},{title: '软件',dataIndex: 'paidSoftware',key: 'paidSoftware',},{title: '软件金额',dataIndex: 'paidSoftwareAmount',key: 'paidSoftwareAmount',},{title: '位置',dataIndex: 'region',key: 'region',},{title: '场地',dataIndex: 'workPlace',key: 'workPlace',},{title: '进来日期',dataIndex: 'typeState',key: 'typeState',},{title: '离开日期',dataIndex: 'entryDate',key: 'entryDate',},{title: '设备证明',dataIndex: 'clearanceCertificate',key: 'clearanceCertificate',},{title: '操作',align: 'center',dataIndex: 'action',fixed: 'right',width: '200px',key: 'action',// render: (_: any, record: any) => (//   <div>//     <Button type='link' onClick={() => handleInterview(record)}>查看简历</Button>//     <Button type='link' disabled={isShowEquipmentRequisition} onClick={() => handleInterview(record)}>设备领用</Button>//     <Button type='link' onClick={() => handlePersonnelManagement}>释放</Button>//   </div>// ),},
];

我父组件:要在操作这里增加按钮,代码如下:

import { dataColumns } from './columns';
const [columnsData, setColumnsData]: any = useState([]);// table表头数据const getColumnsFn = (list: any) => list.map((item: any) => {if (item?.dataIndex === 'finalReviewResult') {// setRenderFinalReviewResult(item);} else if (item?.dataIndex === 'orderStatus') {// setRenderOrderStatus(item);} else if (item?.dataIndex === 'action') {item.render = (text: string, record: any) => (<><Space><span className='link-btn'>查看简历</span><span className='link-btn' onClick={() => handleEdit(record)}>编辑</span><span className='link-btn'>释放</span></Space></>);}return item;});// ==========组件生命周期开始==========useEffect(() => {const currentColumns = getColumnsFn(dataColumns);setColumnsData([...currentColumns]);}, []);<Tableloading={lodingFlag}// rowSelection={{ ...rowSelection }}dataSource={dataSource}columns={columnsData}size={'middle'}borderedclassName="project-member-table-content"pagination={{ ...tablePagination }}scroll={dataSource.length > 0? { x: 'max-content', y: 'calc(100vh - 230px)' }: { x: 'max-content' }}/>

相关文章:

【react】react+es6+antd5.13.2+ts,antd表格的操作如何在父组件写?

reactes6antd5.13.2ts,antd表格的操作如何在父组件写&#xff1f; 我的子组件columns.tsx&#xff0c;只加表头&#xff0c;操作放在父组件。 columns.tsx的代码&#xff1a; export const dataColumns [{title: 项目成员,dataIndex: name,key: name,},{title: 可选账号,alig…...

virtio笔记

最近在看虚拟化相关的东西&#xff0c;以virtio-console为例&#xff0c;记录下。 此文只是学习笔记&#xff0c;文中肯定有不少错误&#xff0c;不要参考 devicemd侧&#xff1a; virtio_console.c中&#xff0c;初始化会对port->cb赋值为 viritio_console_control_tx&am…...

初始web服务器(并基于idea来实现无需下载的tomcat)

前言 前面学习了对应的http协议&#xff0c;我们知道了他是在网络层进行数据传输的协议&#xff0c;负责相应数据以及接收数据的规则&#xff0c;但是在人员开发后端的时候不仅仅需要你写io流进行数据传输&#xff0c;还需要你进行对应的tcp协议来进行数据打包发送http协议-CSD…...

软件文档测试

1 文档测试的范围 软件产品由可运行的程序、数据和文档组成。文档是软件的一个重要组成部分。 在软件的整人生命周期中&#xff0c;会用到许多文档&#xff0c;在各个阶段中以文档作为前阶段工作成果的体现和后阶段工作的依据。 软件文档的分类结构图如下图所示&#xff1a; …...

从零开始手写mmo游戏从框架到爆炸(七)— 消息封装

导航&#xff1a;从零开始手写mmo游戏从框架到爆炸&#xff08;零&#xff09;—— 导航-CSDN博客 上一篇&#xff0c;我们初步把消息handler 注册到了服务中&#xff0c;在进行后续工作之前我们需要再做一些准备工作。 第一&#xff1a;把之前自己管理的bean放到spring中…...

从Unity到Three.js(画线组件line)

JavaScript 0基础&#xff0c;只是照着官方文档临摹了下&#xff0c;之后有时间再进行细节学习和功能封装。 import * as THREE from three; //引入threejsconst renderer new THREE.WebGLRenderer();//创建渲染器 //设置渲染范围&#xff0c;当前撑满全屏,屏幕左上角是&…...

LCP 30. 魔塔游戏 - 力扣(LeetCode)

题目描述 小扣当前位于魔塔游戏第一层&#xff0c;共有 N 个房间&#xff0c;编号为 0 ~ N-1。每个房间的补血道具/怪物对于血量影响记于数组 nums&#xff0c;其中正数表示道具补血数值&#xff0c;即血量增加对应数值&#xff1b;负数表示怪物造成伤害值&#xff0c;即血量减…...

数据结构——单向链表和双向链表的实现(C语言版)

目录 前言 1. 链表 1.1 链表的概念及结构 1.2 链表的分类 2. 单链表接口实现 2.1 数据结构设计与接口函数声明 2.2 创建结点&#xff0c;打印&#xff0c;查找 2.3 尾插&#xff0c;头插&#xff0c;尾删&#xff0c;头删 2.4 插入或删除 2.4.1在指定位置后 2.4.2在…...

TCP和UDP相关问题(重点)(4)——4.使用TCP的协议有哪些?使用UDP的协议有哪些?

4.使用TCP的协议有哪些&#xff1f;使用UDP的协议有哪些&#xff1f; 使用TCP的协议有&#xff1a;HTTP3.0之前的HTTP协议、HTTPS、FTP、SMTP、SSH... 使用UDP的协议有&#xff1a;HTTP3.0、DNS、DHCP......

Python进阶--爬取美女图片壁纸(基于回车桌面网的爬虫程序)

目录 一、前言 二、爬取下载美女图片 1、抓包分析 a、分析页面 b、明确需求 c、抓包搜寻 d、总结特点 2、编写爬虫代码 a、获取图片页网页源代码 b、提取所有图片的链接和标题 c、下载并保存这组图片 d、 爬取目录页的各种类型美女图片的链接 e、实现翻页 三、各…...

[office] excel如何计算毛重和皮重的时间间隔 excel计算毛重和皮重时间间隔方法 #笔记#学习方法

excel如何计算毛重和皮重的时间间隔 excel计算毛重和皮重时间间隔方法 在日常工作中经常会到用excel&#xff0c;有时需要计算毛重和皮重的时间间隔&#xff0c;具体的计算方式是什么&#xff0c;一起来了解一下吧 在日常工作中经常会到用excel&#xff0c;在整理编辑过磅数据…...

Pandas 对带有 Multi-column(多列名称) 的数据排序并写入 Excel 中

Pandas 从Excel 中读取带有 Multi-column的数据 正文 正文 我们使用如下方式写入数据&#xff1a; import pandas as pd import numpy as npdf pd.DataFrame(np.array([[10, 2, 0], [6, 1, 3], [8, 10, 7], [1, 3, 7]]), columns[[Number, Name, Name, ], [col 1, col 2, co…...

如何为Kafka加上账号密码(一)

Kafka认证基本概念 一直以来&#xff0c;我们公司内网的Kafka集群都是在裸奔&#xff0c;只要知道端口号&#xff0c;任何人都能连上集群操作一番。直到有个主题莫名消失&#xff0c;才引起我们的警觉&#xff0c;是时候该考虑为它添加一套认证策略了。 认证和授权就是一对孪生…...

Elasticsearch的Index Lifecycle Management(ILM)

Elasticsearch的Index Lifecycle Management&#xff08;ILM&#xff09;功能提供了一种自动化管理索引生命周期的方式。ILM使得用户可以基于特定的条件&#xff08;如索引的年龄、大小等&#xff09;来自动执行如回滚、删除等操作&#xff0c;进而优化存储和提高查询性能。ILM…...

2、学习 Nacos 注册中心

学习 Nacos 注册中心 一、使用Nacos作为注册中心1、父pom.xml文件配置SpringCloudAlibaba的dependency-management依赖2、在微服务中添加Nacos客户端依赖3、配置Nacos服务地址 二、服务的分级存储模型1、配置实例的集群属性2、权重配置 三、命名空间 一、使用Nacos作为注册中心…...

Java 如何操作 nginx 服务器上的文件?

随着Java技术的不断发展&#xff0c;越来越多的开发人员开始使用Java来操作服务器上的文件。其中&#xff0c;如何操作nginx服务器上的文件也是许多Java开发人员所关注的重点之一。本文将介绍Java操作nginx服务器上文件的基本方法。 一、使用Java的File类 Java的File类可以用…...

时序预测 | MATLAB实现基于CNN-GRU-AdaBoost卷积门控循环单元结合AdaBoost时间序列预测

时序预测 | MATLAB实现基于CNN-GRU-AdaBoost卷积门控循环单元结合AdaBoost时间序列预测 目录 时序预测 | MATLAB实现基于CNN-GRU-AdaBoost卷积门控循环单元结合AdaBoost时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于CNN-GRU-AdaBo…...

中创ET4410 台式LCR数字电桥 简单开箱测评

最近买了一台LCR电桥&#xff0c;完善一下自己实验室的设备&#xff0c;选了中创ET4410&#xff0c;这款性价比高一点。 1199元在PDD买的&#xff0c;好像胜利的VC4090C也是找中创代工的。 ET4410介绍 本系列LCR数字电桥是采用自动平衡电桥原理设计的元件参数分析仪&#xf…...

格式化dingo返回内容

dingo api返回的内容中添加code 和 message &#xff0c;保持与异常返回的内容格式相一致。 失败会存在code 和 message &#xff0c;我们只需要关注成功的情况 非分页返回&#xff0c;可以创建一个父类controller&#xff0c;通过调用sucess方法来返回 class Controller ext…...

QGIS编译(跨平台编译)之四十六:minizip编译(Windows、Linux、MacOS环境下编译)

文章目录 一、minizip介绍二、minizip下载三、Linux下编译四、MacOS下编译五、Windows下编译一、minizip介绍 Minizip 是一个用于处理 ZIP 文件的开源库,它基于 zlib 库构建。zlib 是一个广泛使用的、免费的、开源的压缩库,提供数据压缩和解压缩功能。Minizip 扩展了 zlib 的…...

AArch64虚拟内存系统架构与64KB粒度地址转换详解

1. AArch64虚拟内存系统架构概述现代处理器架构通过虚拟内存机制实现物理内存与虚拟地址空间的隔离映射&#xff0c;AArch64作为ARMv8/ARMv9架构的64位执行状态&#xff0c;其虚拟内存系统架构&#xff08;VMSA&#xff09;采用多级页表机制实现地址转换。与传统x86架构相比&am…...

终极指南:3步掌握FakeLocation应用级虚拟定位保护隐私

终极指南&#xff1a;3步掌握FakeLocation应用级虚拟定位保护隐私 【免费下载链接】FakeLocation Xposed module to mock locations per app. 项目地址: https://gitcode.com/gh_mirrors/fak/FakeLocation 你是否担心手机应用过度获取你的真实位置&#xff1f;想不想为微…...

如何快速实现GitHub界面全面中文化:3分钟安装终极汉化插件

如何快速实现GitHub界面全面中文化&#xff1a;3分钟安装终极汉化插件 【免费下载链接】github-chinese GitHub 汉化插件&#xff0c;GitHub 中文化界面。 (GitHub Translation To Chinese) 项目地址: https://gitcode.com/gh_mirrors/gi/github-chinese GitHub中文插件…...

手把手教你用VHDL在FPGA上解码IMX214 MIPI视频(基于MC20901 D-PHY,含6套工程源码)

基于VHDL的FPGA视频处理系统实战&#xff1a;从IMX214到高清显示 在嵌入式视觉系统开发中&#xff0c;FPGA因其并行处理能力和低延迟特性&#xff0c;成为视频采集与处理的理想平台。本文将深入探讨如何利用VHDL语言在Xilinx FPGA上构建完整的MIPI视频处理流水线&#xff0c;实…...

别再死记FPN公式了!用PyTorch手把手带你画一遍特征金字塔的‘数据流图’

用PyTorch动态可视化FPN特征金字塔的数据流动 在目标检测领域&#xff0c;特征金字塔网络&#xff08;FPN&#xff09;已经成为处理多尺度目标的标配组件。但很多开发者虽然能背诵FPN的结构图&#xff0c;却对特征图在金字塔各层之间的流动变化缺乏直观感受。本文将带您用PyTor…...

别再手动分片了!用SeaweedFS的Chunk机制搞定海量小文件存储(Docker实战)

别再手动分片了&#xff01;用SeaweedFS的Chunk机制搞定海量小文件存储&#xff08;Docker实战&#xff09; 当你的图片上传服务每天新增百万级文件时&#xff0c;传统存储方案往往会突然"罢工"——目录遍历耗时从秒级飙升到分钟级&#xff0c;inode耗尽导致服务崩溃…...

告别轮询!手把手教你用S32K3的FlexCAN Enhanced FIFO+DMA实现高效CAN FD数据接收

告别轮询&#xff01;手把手教你用S32K3的FlexCAN Enhanced FIFODMA实现高效CAN FD数据接收 在汽车电子和工业控制领域&#xff0c;CAN FD总线的高负载场景对MCU的实时性提出了严苛挑战。当波特率飙升至5Mbps、单帧数据扩展到64字节时&#xff0c;传统的中断接收模式会让CPU陷入…...

告别NeRF的漫长等待:用3D Gaussian Splatting在Colab上5分钟跑通你的第一个3D场景

5分钟在Colab玩转3D高斯泼溅&#xff1a;零基础极速生成你的3D场景 当你想把几张随手拍的照片变成可自由旋转的3D场景时&#xff0c;传统方法可能需要数小时甚至更久的等待。现在&#xff0c;3D高斯泼溅&#xff08;3D Gaussian Splatting&#xff09;技术让这一切变得触手可及…...

双人成行2026最新官方正版免费下载 520情侣必玩 一键转存 永久更新 (看到速转存 资源随时走丢)

下载链接 # 编织奇迹的合作历程&#xff1a;《双人成行》的幕后、机制与同类作品剖析 在现代电子游戏领域&#xff0c;纯粹专注于双人合作的游戏并不多见&#xff0c;而能将其做到极致并斩获行业高额荣誉的作品&#xff0c;更是凤毛麟角。由Hazelight Studios开发的《双人成行…...

Langchain的学习(一)

目录 一,实操 编码 Runnable Runnable 是什么 核心方法(所有 Runnable 都有) 最关键能力:用 | 组合(LCEL) 常用内置 Runnable 总结 二,聊天模型-核心能力 定义模型 init_chat_model 本地部署 调用工具 定义工具-Tool version1 schema: version2(基于…...