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

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

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

组件代码:

import { Modal } from 'antd'

export default function LogDialog(props: any) {
    const { visible, closeDialog, content } = props
    return (
        <div>
            <Modal
                title="日志详情"
                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 } = DatePicker

interface DataType {
    id: number
    key: number
    logTime: string
    type: string
    content: string
    createDate: string
    updateDate: 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>
                    <span
                        className="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">
                <Form
                    layout="inline"
                    form={form}
                    initialValues={{ layout: 'inline' }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item label="搜索内容" name="keyWord">
                        <Input placeholder="请输入搜索词" />
                    </Form.Item>
                    <Form.Item label="筛选类型" name="logType">
                        <Select
                            style={{ width: 120 }}
                            options={[
                                { value: 'jack', label: '生产' },
                                { value: 'lucy', label: '开发' },
                                { value: 'Yiminghe', label: '错误' },
                                {
                                    value: 'disabled',
                                    label: '严重',
                                },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item label="时间范围" name="timeRange">
                        <RangePicker
                            showTime={{ 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} />
                {/* 弹窗展示 */}
                <LogDialog
                    visible={isModalOpen}
                    closeDialog={() => setIsModalOpen(false)}
                    content={record}
                ></LogDialog>
            </div>
        </div>
    )
}

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

相关推荐
前端拾光者37 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q2 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海2 小时前
Chrome离线安装包下载
前端·chrome