react 手机端 rc-table列隐藏(根据相关条件是否隐藏)、实现图片上传操作

最近公司某一项目的手机端,新增需求:table中的附件要可以编辑,并且是在特定条件下可编辑,其他仅做展示效果。
查阅官方文档,没有发现是否隐藏这一属性,通过css控制样式感觉也比较麻烦,后面发现可以通过过滤来控制
效果图:
不可编辑、仅展示
在这里插入图片描述
可编辑
在这里插入图片描述
在这里插入图片描述
实现代码(主要是相关的columns):

const [detailList, setDetailList] = useState([]) // 明细信息
const [sealList, setSealList] = useState([]); // 上传的范印
const [editId, setEditId] = useState(''); // 修改范印的数据idconst columns = [
// {} ...
{title: getIntl({ id: 'sealFileId' }), // 范印dataIndex: 'sealFileSuffix',key: 'sealFileSuffix',render: (val, params) => {return <a onClick={()=>{download({ fileId: params.sealFileId,  fileName: params.sealFileSuffix })}}>{val}</a>;},align: 'center',},{title: getIntl({ id: 'operation' }), // 操作dataIndex: '',key: 'operation',render: (val, params, sss) => {return <a onClick={()=>{setEditId(params.id) // 这里记录下修改的是表格中的哪条数据,对应后面上传成功后进行匹配修改表格数据}}><ImageUploadervalue={[]}maxCount={1}onChange={setSealList}upload={upload}><span>上传</span></ImageUploader></a>;},align: 'center',hidden: qs.parse(location.search)?.pageType !== 'submit' // 这里是如果当前url上pageType为submit时,操作列展示可操作// 这里通过filter过滤来实现某条件下,此操作列是否隐藏},].filter(item => !item.hidden)const upload = async file => {const {url} = getMethodInfo('FILE_UPLOAD')const data = new FormData()data.append('file', file)await axios({ // 这里自己后端的图片上传接口url: url,method: 'post',data,}).then((res) => {if (res.data.code == 200){detailList.map(item =>{if(item.id === editId) {item.sealFileId = res.data.datas?.fileIditem.sealFileSuffix = res.data.datas?.fileName}})setDetailList(detailList)}})return { url: '' }}return (<TableemptyText={getIntl({ id: 'component.noticeIcon.empty' })}columns={columns}data={detailList}/>
)

相关的css

:global {.adm-image-uploader-cell {display: none;}.adm-space-item .adm-image-uploader-upload-button-wrap {display: block !important;}.adm-space-horizontal > .adm-space-item {margin-right: 0;}}

其他:其他相关可以去参考官方文档
https://www.npmjs.com/package/rc-table

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

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

相关文章

全球首款容器计算产品重磅发布,激活上云用云新范式

云布道师 10 月 31 日&#xff0c;杭州云栖大会上&#xff0c;阿里云云原生应用平台负责人丁宇宣布&#xff0c;阿里云容器计算服务 ACS 正式发布&#xff01;ACS 将大幅降低企业和开发者用云门槛&#xff0c;真正将 Serverless 理念大规模落地。 容器计算服务 ACS&#xff0c…

hologres 索引与查询优化

hologres 优化部分 1 hologres 建表优化1.1 建表中的配置优化1.1 字典索引 dictionary_encoding_columns1.2 位图索引 bitmap_columns1.2.2 Bitmap和Clustering Key的区别 1.3 聚簇索引Clustering Key 1 hologres 建表优化 1.1 建表中的配置优化 根据 holo的 存储引擎部分的知…

关于在3dsmax中制作的模型导入UE后尺寸大小不对的问题

现象 在3dsmax中的基本单位为毫米 在UE中基本单位是厘米 我在3dsmax中创建一个长宽高均为1000mm的方块 然后导入到UE中的世界坐标原点 方块向X轴正方向移动100个单位100cm1000mm&#xff0c;按理来说&#xff0c;新方块的此时应该和旧方块是贴着的&#xff0c;但是现象确是两者…

深度学习入门:自建数据集完成花鸟二分类任务

自建数据集完成二分类任务&#xff08;参考文章&#xff09; 1 图片预处理 1 .1 统一图片格式 找到的图片需要首先做相同尺寸的裁剪&#xff0c;归一化&#xff0c;否则会因为图片大小不同报错 RuntimeError: stack expects each tensor to be equal size, but got [3, 667…

【VRTK】【VR开发】【Unity】7-配置交互能力和向量追踪

【前情提要】 目前为止,我们虽然设定了手模型和动画,还能够正确根据输入触发动作,不过还未能与任何物体互动。要互动,需要给手部设定相应的Interactor能力。 【配置Interactor的抓取功能】 在Hierarchy中选中[VRTK_CAMERA_RIGS_SETUP] ➤ Camera Rigs, Tracked Alias ➤ …

VBA技术资料MF85:将工作簿批量另存为PDF文件

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。我的教程一共九套&#xff0c;分为初级、中级、高级三大部分。是对VBA的系统讲解&#xff0c;从简单的入门&#xff0c;到…

UE4 基础篇十四:自定义插件

文末有视频地址和git地址 一、概念 虚幻里插件都是用C++写的,C++包括.h文件和.cpp文件,.h头文件通常包含函数类型和函数声明,cpp文件包含这些类型和函数的实现, 你为项目编写的所有代码文件都必须位于模块中,模块就是硬盘里的一个文件夹,包含名为“Build.cs”的C#文件…

BGP笔记实验

IGP(Interior Gateway Protocol)——内部网关协议 OSPF RIP IS-IS IGRP EIGRP EGP(External Gateway Protocol)——外部网关协议 EGP BGP——边界网关协议 AS——自治系统 由单一组织or机构独立维护的网络设备&网络资源的集合 网络范围太大 自治 AS号 为了区分不同…

API网关那些事【架构新知系列】

目前随着云原生ServiceMesh和微服务架构的不断演进&#xff0c;网关领域新产品不断出现&#xff0c;各种网关使用的技术&#xff0c;功能和应用领域也不断扩展&#xff0c;在各有所长的前提下也有很多功能重合&#xff0c;网上各种技术PR文章&#xff0c;评测资料和网关落地实践…

2024年山东省职业院校技能大赛中职组“网络安全”赛项竞赛试题-A

2024年山东省职业院校技能大赛中职组 “网络安全”赛项竞赛试题-A 一、竞赛时间 总计&#xff1a;360分钟 二、竞赛阶段 竞赛阶段 任务阶段 竞赛任务 竞赛时间 分值 A、B模块 A-1 登录安全加固 180分钟 200分 A-2 本地安全策略设置 A-3 流量完整性保护 A-4 …

Ubuntu18.04安装LeGO-LOAM保姆级教程

系统环境&#xff1a;Ubuntu18.04.6 LTS 1.LeGO-LOAM的安装前要求&#xff1a; 1.1 ROS安装&#xff1a;参考我的另一篇博客Ubuntu18.04安装ROS-melodic保姆级教程_灬杨三岁灬的博客-CSDN博客文章浏览阅读168次。Ubuntu18.04安装ROS-melodic保姆级教程https://blog.csdn.net/…

海外IP代理科普——API代理是什么?怎么用?

随着互联网的不断发展&#xff0c;越来越多的企业开始使用API&#xff08;应用程序接口&#xff09;来实现数据的共享和交流。而在API使用中&#xff0c;海外代理IP也逐渐普及。那么&#xff0c;什么是API代理IP呢&#xff1f;它有什么作用&#xff1f;API接口有何用处&#xf…

Ubuntu22.04 交叉编译GCC13.2.0 for Rv1126

一、安装Ubuntu22.04 sudo apt install vim net-tools openssh-server 二、安装必要项 sudo apt update sudo apt upgrade sudo apt install build-essential gawk git texinfo bison flex 三、下载必备软件包 1.glibc https://ftp.gnu.org/gnu/glibc/glibc-2.38.tar.gz…

vs code git问题:文件明明已加入忽略文件中,还是出现

vs code git问题&#xff1a;文件明明已加入忽略文件中&#xff0c;还是出现 原因&#xff1a; 因为之前这些文件都已经提交过&#xff0c;线上GIT已经存在&#xff0c;已存在就不能忽略&#xff0c; 解决办法&#xff1a; 先要删除这些文件提交上去&#xff0c;然后把这些文…

echarts 中如何添加左右滚动条 数据如何进行堆叠如何配置那些数据使用那个数据轴

左右滚动条的效果 此项的具体配置可参考 https://echarts.apache.org/zh/option.html#dataZoom-inside.moveOnMouseWheel dataZoom: [{id: dataZoomX,type: inside,// start: 0,// end: this.xAxis.length > 5 ? 10 : 100,startValue: this.xAxis.length > 5 ? 5 : 0,/…

RoCE、IB和TCP等网络的基本知识及差异对比

目前有三种RDMA网络&#xff0c;分别是Infiniband、RoCE(RDMA over Converged Ethernet)、iWARP。 其中&#xff0c;Infiniband是一种专为RDMA设计的网络&#xff0c;从硬件级别保证可靠传输 &#xff0c;技术先进&#xff0c;但是成本高昂。 而RoCE 和 iWARP都是基于以太网的…

004 OpenCV akaze特征点检测匹配

目录 一、环境 二、akaze特征点算法 2.1、基本原理 2.2、实现过程 2.3、实际应用 2.4、优点与不足 三、代码 3.1、数据准备 3.2、完整代码 一、环境 本文使用环境为&#xff1a; Windows10Python 3.9.17opencv-python 4.8.0.74 二、akaze特征点算法 特征点检测算法…

使用pytorch利用神经网络原理进行图片的训练(持续学习中....)

1.做这件事的目的 语言只是工具,使用python训练图片数据,最终会得到.pth的训练文件,java有使用这个文件进行图片识别的工具,顺便整合,我觉得Neo4J正确率太低了,草莓都能识别成为苹果,而且速度慢,不能持续识别视频帧 2.什么是神经网络?(其实就是数学的排列组合最终得到统计结果…

ElementUI及ElementUI Plus Axure RP高保真交互元件库及模板库

基于ElementUI2.0及ElementUI Plus3.0二次创作的ElementUI 元件库。2个版本的原型图内容会有所不同&#xff0c;ElementUI Plus3.0的交互更加丰富和高级。你可以同时使用这两个版本。 不仅包含Element UI 2.0版&#xff0c;还包含Element Plus 3版本。Element 2版支持Axure 8&…

接口自动化项目落地之HTTPBin网站

原文&#xff1a;https://www.cnblogs.com/df888/p/16011061.html 接口自动化项目落地系列 找个开源网站或开源项目&#xff0c;用tep实现整套pytest接口自动化项目落地&#xff0c;归档到电子书&#xff0c;作为tep完整教程的项目篇一部分。自从tep完整教程发布以后&#…