react使用antd的table组件，实现点击弹窗显示对应列的内容

特别提醒：不能在table的columns的render里面设置弹窗组件渲染，因为这会导致弹窗显示的始终是最后一行的内容，因为这样渲染的结果是每一行都会重新渲染一遍这个弹窗并且会给传递一个content的值，渲染到最后一行的时候，就传递的是最后一行的值。这就导致你有多少行数据，就会显示多少个弹窗，当你点击显示的时候，会将所有的弹窗的一下显示出来，这个时候你会看到一个背景特别深的弹窗：而且内容显示的是最后一样的内容。所以不能这样写

 

解决办法就是将弹窗单独封装成一个组件，然后全局使用一个同一个弹窗组件：

 

组件代码：

import { Modal } from 'antd'export default function LogDialog(props: any) {const { visible, closeDialog, content } = propsreturn (<div><Modaltitle="日志详情"open={visible}onOk={closeDialog}onCancel={closeDialog}><p className="dialog-log">{content}</p></Modal></div>)
}

在父组件里面引入并使用：

父组件代码：

import LogDialog from '@/components/logDialog'
import { UploadOutlined } from '@ant-design/icons'
import {Button,Form,Input,Table,Tag,DatePicker,Select,Upload,
} from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { UploadProps } from 'antd/lib/upload/interface'
import { useState } from 'react'
import './index.scss'const { RangePicker } = DatePickerinterface DataType {id: numberkey: numberlogTime: stringtype: stringcontent: stringcreateDate: stringupdateDate: string
}export default function Board() {const [form] = Form.useForm()const [isModalOpen, setIsModalOpen] = useState(false)const [record, setRecord] = useState('')const showContent = (content: string) => {setRecord(content)setIsModalOpen(true)}const columns: ColumnsType<DataType> = [{title: '时间',dataIndex: 'logTime',key: 'logTime',width: 200,ellipsis: true,},{title: '类型',key: 'type',dataIndex: 'type',width: 200,render: (_, { id, type }) => (<Tag color={type === 'ERROR' ? 'volcano' : 'green'} key={id}>{type}</Tag>),},{title: '内容',dataIndex: 'content',key: 'content',render: (_, { content }) => (<div><spanclassName="content-pre"onClick={() => showContent(content)}>{content}</span></div>),},]const data: DataType[] = [{id: 1,key: 1,logTime: '2023-08-14 18:22:12',type: 'ERROR',content:'com.zetyun.sinkops.KuduSinkAction                            [] - Exception',createDate: '2023-08-16T16:50:39',updateDate: '2023-08-16T16:50:39',},{id: 2,key: 2,logTime: '2023-08-14 18:22:12',type: 'ERROR',content:'com.zetyun.sinkops.KuduSinkAction                            [] - Exception',createDate: '2023-08-16T16:50:39',updateDate: '2023-08-16T16:50:39',},{id: 3,key: 3,logTime: '2023-08-14 18:22:12',type: 'ERROR',content:'com.zetyun.sinkops.KuduSinkAction                            [] - Exception',createDate: '2023-08-16T16:50:39',updateDate: '2023-08-16T16:50:39',},{id: 4,key: 4,logTime: '2023-08-14T18:22:12',type: 'INFO',content:'com.zetyun.sinkops.KuduSinkAction                            [] - Exception',createDate: '2023-08-16T16:50:39',updateDate: '2023-08-16T16:50:39',},{id: 5,key: 5,logTime: '2023-08-14T18:22:12',type: 'INFO',content:'com.zetyun.sinkops.BatchOperation                            [] - updateAfter: {termostype=PCDH5WebViewController, productid=PCDH5WebViewController|mdButton_EventTouchUpInside:withEvent:, behaviorstatus=-, language=follow_system_zh-Hans-CN, userid=14936158510, refviewid=-, resolution=1290*2796, behaviortype=NebulaTech, alipayproductid=161BC41281604_IOS-uat1, user_sessionid=-, producertype=c, inner_version=-, utdid=Y41HzF2GQgcDAJduUmZToqle, lbslabel=-, cpu_max_freq=-, version=3, app_channel=-, requestid=-, thread_name=-, termtype=PCDH5WebViewController, subapplicationversion=-, server_location=ip=183.195.2.234^country=�й�^province=�Ϻ�^city=�Ϻ�^district=XX^isp=�ƶ�^header=H5-VM, analysis_code=348, alipayproductversion=7.2.8, seed=H5_AL_JSAPI_RESULT_ERROR, device_model=iPhone15 3, behaviorid=clicked, behaviorstatusmsg=https://20221004.uat1_mbank.bosc.com/fncD709Pro/redeem/reInput.html|https://20221004.uat1_mbank.bosc.com/fncD709Pro/redeem/reInput.html__Y41HzF2GQgcDAJduUmZToqle__OdpaFNh_, subapplicationid=20221004, total_mem=-, productversion=Adb22d7e658b88e6beb2c92009071dbac, network=WIFI|�й��ƶ�, viewid=-, lbslocation=-, hot_patch=-, exinfo3=jsapiName=getUserInfoEx^params=^code=1^msg=�ӿڲ�����, exinfo4=appId=20221004^version=0.0.0.55^url=https://20221004.uat1_mbank.bosc.com/fncD709Pro/redeem/reResult.html^referer=https://20211004.uat1_mbank.bosc.com/financial/financialList/home.html^h5Token=6ed3561fc2308fdee7fdd3fc19fc74a0^isEntrance=NO^refviewId=PCDH5WebViewController^h5SessionToken=2e6751f113f161d2a9a1aaedeef70261^log_release_type=ONLINE^sourceId=20211004^token=Adb22d7e658b88e6beb2c92009071dbac^isTinyApp=NO^viewId=PCDH5WebViewController^webViewVersion=WKWebView^mp_baseline=v10.2.3.11^mp_module=NebulaTech, exinfo1=https://20221004.uat1_mbank.bosc.com/fncD709Pro/redeem/reResult.html, exinfo2=-, os_version=16.0.3, productchannel=1000, log_time=2023-08-14 18:22:07.935, url=2, bundle_version=VoiceOver=0^TimeZone=Asia/Shanghai, tcid=Y41HzF2GQgcDAJduUmZToqle, awid=0B0E6169-44C7-413C-BEE2-D255B17B84D8, logtime=2023-08-14 18:22:07:221, cpu_core_num=-, promotion=-, commit_ts=null, serialize_ts=null, etl_ts=1692008532103}',createDate: '2023-08-16T16:50:40',updateDate: '2023-08-16T16:50:40',},]const onFinish = (values: any) => {console.log('Success:', values)}const onFinishFailed = (errorInfo: any) => {console.log('Failed:', errorInfo)}const onReset = () => {form.resetFields()}const props: UploadProps = {name: 'file',previewFile(file) {console.log('file', file)return new Promise(() => {})},onChange(info) {console.log('info-', info)},beforeUpload: () => {return false},}return (<div className="board-main"><div className="board-logo">RT日志监控页面</div><div className="board-search"><Formlayout="inline"form={form}initialValues={{ layout: 'inline' }}onFinish={onFinish}onFinishFailed={onFinishFailed}><Form.Item label="搜索内容" name="keyWord"><Input placeholder="请输入搜索词" /></Form.Item><Form.Item label="筛选类型" name="logType"><Selectstyle={{ width: 120 }}options={[{ value: 'jack', label: '生产' },{ value: 'lucy', label: '开发' },{ value: 'Yiminghe', label: '错误' },{value: 'disabled',label: '严重',},]}/></Form.Item><Form.Item label="时间范围" name="timeRange"><RangePickershowTime={{ format: 'HH:mm' }}format="YYYY-MM-DD HH:mm"/></Form.Item><Form.Item><Button htmlType="button" onClick={onReset}>重置</Button></Form.Item><Form.Item><Button type="primary" htmlType="submit">搜索</Button></Form.Item></Form><div><Upload {...props}><Button icon={<UploadOutlined />}>上传日志</Button></Upload></div></div><div className="board-list"><Table columns={columns} dataSource={data} />{/* 弹窗展示 */}<LogDialogvisible={isModalOpen}closeDialog={() => setIsModalOpen(false)}content={record}></LogDialog></div></div>)
}

这个时候，再点击对应行的内容，就可以正常显示了：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/41205.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Unity的TimeScale的影响范围分析

Unity的TimeScale的影响范围分析

大家好&#xff0c;我是阿赵。 这期来说一下Unity的TimeScale。 一、前言 Unity提供了Time这个类&#xff0c;来控制时间。其实我自己倒是很少使用这个Time&#xff0c;因为做网络同步的游戏&#xff0c;一般是需要同步服务器时间&#xff0c;所以我比较多是在使用System.Date…
阅读更多...
linux驱动 - 20230817

linux驱动 - 20230817

练习: 通过字符设备驱动分步注册方式编写LED灯的驱动&#xff0c;应用程序使用ioctl函数编写硬件控制逻辑 头文件 head.h #ifndef __HEAD_H__ #define __HEAD_H__ typedef struct{unsigned int MODER;unsigned int OTYPER;unsigned int OSPEEDR;unsigned int PUPDR;unsigned…
阅读更多...
问道管理：机器人概念走势活跃，新时达涨停，拓斯达、丰立智能等大涨

问道管理：机器人概念走势活跃，新时达涨停，拓斯达、丰立智能等大涨

机器人概念17日盘中走势活跃&#xff0c;到发稿&#xff0c;拓斯达大涨18%&#xff0c;昊志机电涨近16%&#xff0c;丰立智能涨超13%&#xff0c;步科股份、优德精细涨超10%&#xff0c;新时达涨停&#xff0c;天玑科技、兆龙互联、中大力德涨逾9%。 消息面上&#xff0c;8月16…
阅读更多...
HTTP 介绍

HTTP 介绍

HTTP 介绍 HTTP 协议一般指 HTTP&#xff08;超文本传输协议&#xff09;。超文本传输协议&#xff08;英语&#xff1a;HyperText Transfer Protocol&#xff0c;缩写&#xff1a;HTTP&#xff09;是一种用于分布式、协作式和超媒体信息系统的应用层协议&#xff0c;是因特网…
阅读更多...
Java 计算两个字符的相似度

Java 计算两个字符的相似度

在Java中&#xff0c;要计算两个字符的相似度&#xff0c;可以借助一些字符串相似度算法。以下是几种常见的字符串相似度算法&#xff1a; Levenshtein距离&#xff1a;也称为编辑距离&#xff0c;用于计算两个字符串之间的最小编辑操作次数&#xff08;插入、删除、替换&…
阅读更多...
解决ios隔空播放音频到macos没有声音的问题

解决ios隔空播放音频到macos没有声音的问题

解决ios隔空播放音频到macos没有声音的问题 一、检查隔空播放支持设备和系统要求二、打开隔空播放接收器三、重置MAC控制中心进程END 一、检查隔空播放支持设备和系统要求 Mac、iPhone、iPad 和 Apple Watch 上“连续互通”的系统要求 二、打开隔空播放接收器 ps;我设备是同一…
阅读更多...
java 并发 简单使用

java 并发 简单使用

文章目录 概要代码 概要 java 并发 简单使用 代码 public static final ExecutorService EXECUTOR_GENERAL new ThreadPoolExecutor(100, 1000,0L, TimeUnit.MILLISECONDS, new LinkedBlockingQueue<>(10000));int size 1000;List<UserService> userServices …
阅读更多...
element+vue 表格行拖拽功能

element+vue 表格行拖拽功能

解决方案 使用 sortable.js 步骤一&#xff1a; 安装 npm install vuedraggable步骤二&#xff1a;引入 import Sortable from sortablejs;步骤三&#xff1a; el-table 添加row-key属性&#xff0c;外层包一层 sortableDiv <div class"sortableDiv"> 拖…
阅读更多...
分类预测 | MATLAB实现WOA-CNN-BiLSTM-Attention数据分类预测

分类预测 | MATLAB实现WOA-CNN-BiLSTM-Attention数据分类预测

分类预测 | MATLAB实现WOA-CNN-BiLSTM-Attention数据分类预测 目录 分类预测 | MATLAB实现WOA-CNN-BiLSTM-Attention数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.MATLAB实现WOA-CNN-BiLSTM-Attention数据分类预测&#xff0c;运行环境Matlab2023b及以上…
阅读更多...
Django图书商城系统实战开发-部署上线操作

Django图书商城系统实战开发-部署上线操作

Django图书商城系统实战开发-打包部署 技术背景掌握 当你需要在服务器上部署Web应用程序时&#xff0c;Nginx是一个强大且常用的选择。Nginx是一个高性能的Web服务器和反向代理服务器&#xff0c;它可以处理大量的并发连接&#xff0c;并提供负载均衡、缓存、SSL等功能。下面…
阅读更多...
seata 的部署和集成

seata 的部署和集成

文章目录 seata的部署和集成一、部署Seata的tc-server1.下载2.解压3.修改配置4.在nacos添加配置5.创建数据库表6.启动TC服务 二、微服务集成seata1.引入依赖2.修改配置文件 TODO三、TC服务的高可用和异地容灾1.模拟异地容灾的TC集群2.将事务组映射配置到nacos3.微服务读取nacos…
阅读更多...
中期国际：MT4数据挖掘与分析方法：以数据为导向，制定有效的交易策略

中期国际：MT4数据挖掘与分析方法：以数据为导向，制定有效的交易策略

在金融市场中&#xff0c;制定有效的交易策略是成功交易的关键。而要制定一份可靠的交易策略&#xff0c;数据挖掘与分析方法是不可或缺的工具。本文将介绍如何以数据为导向&#xff0c;利用MT4进行数据挖掘与分析&#xff0c;从而制定有效的交易策略。 首先&#xff0c;我们需…
阅读更多...
操作系统搭建相关知识

操作系统搭建相关知识

文章目录 系统篇netstat命令systemctl命令Systemd系统资源分类&#xff08;12类&#xff09; 网络篇ifconfig命令操作系统配置动态IP脚本dhcp服务的安装与配置防火墙相关知识 操作系统常用配置文件 系统篇 netstat命令 netstat指路 systemctl命令 常用于重启系统的每个服务…
阅读更多...
注解@DependsOn

注解@DependsOn

注解 DependsOn 1. 注解由来&#xff1a; DependsOn 注解是 Spring 框架提供的一种注解&#xff0c;用于指定 Bean 之间的依赖关系。通过在 Bean 上添加 DependsOn 注解&#xff0c;可以确保在初始化时先初始化指定的依赖 Bean&#xff0c;从而满足对象之间的正确顺序。 2. 注…
阅读更多...
没有使用springboot 单独使用spring-boot-starter-logging

没有使用springboot 单独使用spring-boot-starter-logging

如果您不使用Spring Boot框架&#xff0c;但想单独使用Spring Boot Starter Logging&#xff0c;您可以按照以下步骤进行&#xff1a; 1. 添加Maven依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boo…
阅读更多...
Kotlin手写RxJava变换符

Kotlin手写RxJava变换符

Kotlin手写RxJava变换符 本文链接&#xff0c;点击这里进入 1、核心点&#xff1a;中转站存储之前的数据 2、三行代码实现RxJava 使用create、map、observer fun main() {// create构造出RxJavaCore存放&#xff0c;lambda执行完的结果create{"WCH"}.map{ // 扩展…
阅读更多...
AI绘画 stable diffusion Midjourney 官方GPT文档 AIGC百科全书资料收集

AI绘画 stable diffusion Midjourney 官方GPT文档 AIGC百科全书资料收集

教学AI绘画 AIGC工具 SD教程 ###Redis面试题 单机Redis的qps大概是多少&#xff1f; 项目中用到了哪些Redis的数据类型&#xff1f;为什么这么用&#xff1f; Redis的key到了过期时间就被删除了吗&#xff1f;简述下Redis的过期策略&#xff1f; Redis有哪几种内存淘汰策略…
阅读更多...
Jetpack Compose：探索声明式UI开发的未来

Jetpack Compose：探索声明式UI开发的未来

Jetpack Compose&#xff1a;探索声明式UI开发的未来 1. 引言 在移动应用开发领域&#xff0c;用户界面&#xff08;UI&#xff09;开发一直是开发过程中的关键挑战之一。传统的UI开发方式往往涉及大量繁琐的布局代码、手动管理状态和事件处理&#xff0c;不仅容易引发错误&a…
阅读更多...
Google浏览器点击链接打开新标签页

Google浏览器点击链接打开新标签页

由于新安装的谷歌浏览器点击链接时默认在当前窗口打开非常不方便&#xff0c;这里提供一下解决思路 1、打开浏览器输入任意内容&#xff0c;点击右上角的设置 2、在弹出的选项栏中点击See all Search settings 3、点击Other settings&#xff0c;将指定选项打开即可
阅读更多...
C++模板元编程（6）模板参数替换（Template argument substitution）

C++模板元编程（6）模板参数替换（Template argument substitution）

文章目录 1、什么是模板参数替换2、实例3、模板参数替换规则 1、什么是模板参数替换 模板参数替换&#xff08;Template argument substitution&#xff09;&#xff1a;在函数模板实例化的过程中&#xff0c;模板参数会被替换为实际的参数类型或值。这个替换过程称为模板参数…
阅读更多...
最新文章

Copyright @ 2022~2023