怎么做几个版面的网站,简单大气网站模板,虹桥街道网站建设,手机网站软件特别提醒#xff1a;不能在table的columns的render里面设置弹窗组件渲染#xff0c;因为这会导致弹窗显示的始终是最后一行的内容#xff0c;因为这样渲染的结果是每一行都会重新渲染一遍这个弹窗并且会给传递一个content的值#xff0c;渲染到最后一行的时候#xff0c;就…特别提醒不能在table的columns的render里面设置弹窗组件渲染因为这会导致弹窗显示的始终是最后一行的内容因为这样渲染的结果是每一行都会重新渲染一遍这个弹窗并且会给传递一个content的值渲染到最后一行的时候就传递的是最后一行的值。这就导致你有多少行数据就会显示多少个弹窗当你点击显示的时候会将所有的弹窗的一下显示出来这个时候你会看到一个背景特别深的弹窗而且内容显示的是最后一样的内容。所以不能这样写 解决办法就是将弹窗单独封装成一个组件然后全局使用一个同一个弹窗组件 组件代码
import { Modal } from antdexport default function LogDialog(props: any) {const { visible, closeDialog, content } propsreturn (divModaltitle日志详情open{visible}onOk{closeDialog}onCancel{closeDialog}p classNamedialog-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.scssconst { 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: ColumnsTypeDataType [{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 }) (divspanclassNamecontent-preonClick{() 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: {termostypePCDH5WebViewController, productidPCDH5WebViewController|mdButton_EventTouchUpInside:withEvent:, behaviorstatus-, languagefollow_system_zh-Hans-CN, userid14936158510, refviewid-, resolution1290*2796, behaviortypeNebulaTech, alipayproductid161BC41281604_IOS-uat1, user_sessionid-, producertypec, inner_version-, utdidY41HzF2GQgcDAJduUmZToqle, lbslabel-, cpu_max_freq-, version3, app_channel-, requestid-, thread_name-, termtypePCDH5WebViewController, subapplicationversion-, server_locationip183.195.2.234^countryй^provinceϺ^cityϺ^districtXX^ispƶ^headerH5-VM, analysis_code348, alipayproductversion7.2.8, seedH5_AL_JSAPI_RESULT_ERROR, device_modeliPhone15 3, behavioridclicked, behaviorstatusmsghttps://20221004.uat1_mbank.bosc.com/fncD709Pro/redeem/reInput.html|https://20221004.uat1_mbank.bosc.com/fncD709Pro/redeem/reInput.html__Y41HzF2GQgcDAJduUmZToqle__OdpaFNh_, subapplicationid20221004, total_mem-, productversionAdb22d7e658b88e6beb2c92009071dbac, networkWIFI|йƶ, viewid-, lbslocation-, hot_patch-, exinfo3jsapiNamegetUserInfoEx^params^code1^msgӿڲ, exinfo4appId20221004^version0.0.0.55^urlhttps://20221004.uat1_mbank.bosc.com/fncD709Pro/redeem/reResult.html^refererhttps://20211004.uat1_mbank.bosc.com/financial/financialList/home.html^h5Token6ed3561fc2308fdee7fdd3fc19fc74a0^isEntranceNO^refviewIdPCDH5WebViewController^h5SessionToken2e6751f113f161d2a9a1aaedeef70261^log_release_typeONLINE^sourceId20211004^tokenAdb22d7e658b88e6beb2c92009071dbac^isTinyAppNO^viewIdPCDH5WebViewController^webViewVersionWKWebView^mp_baselinev10.2.3.11^mp_moduleNebulaTech, exinfo1https://20221004.uat1_mbank.bosc.com/fncD709Pro/redeem/reResult.html, exinfo2-, os_version16.0.3, productchannel1000, log_time2023-08-14 18:22:07.935, url2, bundle_versionVoiceOver0^TimeZoneAsia/Shanghai, tcidY41HzF2GQgcDAJduUmZToqle, awid0B0E6169-44C7-413C-BEE2-D255B17B84D8, logtime2023-08-14 18:22:07:221, cpu_core_num-, promotion-, commit_tsnull, serialize_tsnull, etl_ts1692008532103},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 classNameboard-maindiv classNameboard-logoRT日志监控页面/divdiv classNameboard-searchFormlayoutinlineform{form}initialValues{{ layout: inline }}onFinish{onFinish}onFinishFailed{onFinishFailed}Form.Item label搜索内容 namekeyWordInput placeholder请输入搜索词 //Form.ItemForm.Item label筛选类型 namelogTypeSelectstyle{{ width: 120 }}options{[{ value: jack, label: 生产 },{ value: lucy, label: 开发 },{ value: Yiminghe, label: 错误 },{value: disabled,label: 严重,},]}//Form.ItemForm.Item label时间范围 nametimeRangeRangePickershowTime{{ format: HH:mm }}formatYYYY-MM-DD HH:mm//Form.ItemForm.ItemButton htmlTypebutton onClick{onReset}重置/Button/Form.ItemForm.ItemButton typeprimary htmlTypesubmit搜索/Button/Form.Item/FormdivUpload {...props}Button icon{UploadOutlined /}上传日志/Button/Upload/div/divdiv classNameboard-listTable columns{columns} dataSource{data} /{/* 弹窗展示 */}LogDialogvisible{isModalOpen}closeDialog{() setIsModalOpen(false)}content{record}/LogDialog/div/div)
}这个时候再点击对应行的内容就可以正常显示了
