当前位置: 首页 > 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 的…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

安卓基础(Java 和 Gradle 版本)

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

mac:大模型系列测试

0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何&#xff0c;是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试&#xff0c;是可以跑通文章里面的代码。训练速度也是很快的。 注意…...