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
相关文章:
react 手机端 rc-table列隐藏(根据相关条件是否隐藏)、实现图片上传操作
最近公司某一项目的手机端,新增需求:table中的附件要可以编辑,并且是在特定条件下可编辑,其他仅做展示效果。 查阅官方文档,没有发现是否隐藏这一属性,通过css控制样式感觉也比较麻烦,后面发现可…...
目标检测YOLO系列从入门到精通技术详解100篇-【目标检测】三维重建
目录 前言 几个高频面试题目 “基于RGB-D相机的三维重建"和传统的SFM和SLAM算法有什么区别?...
H110主板搭配魔改QNCW升级小记
最近搬家完毕,翻出来一块闲置已久的qncw,隐约记得是买的主板套装,现在主板早已不知踪影,剩下孤零零一个CPU,一起翻出来一个G3900T亮机CPU,应该是同时代的产物。 qncw百度上一搜,发现参数还行&am…...
Rust8.2 Fearless Concurrency
Rust学习笔记 Rust编程语言入门教程课程笔记 参考教材: The Rust Programming Language (by Steve Klabnik and Carol Nichols, with contributions from the Rust Community) Lecture 16: Fearless Concurrency 无畏并发 src/main.rs use std::thread; use std::time::Du…...
合并两个有序链表(冒泡排序实现)
实例要求:将两个升序链表合并为一个新的 升序 链表并返回;新链表是通过拼接给定的两个链表的所有节点组成的;实例分析:先拼接两个链表,在使用冒泡排序即可;示例代码: struct ListNode* mergeTwo…...
【iOS】——知乎日报第五周总结
文章目录 一、评论区展开与收缩二、FMDB库实现本地持久化FMDB常用类:FMDB的简单使用: 三、点赞和收藏的持久化 一、评论区展开与收缩 有的评论没有被回复评论或者被回复评论过短,这时就不需要展开全文的按钮,所以首先计算被回复评…...
gRPC 四模式之 双向流RPC模式
双向流RPC模式 在双向流 RPC 模式中,客户端以消息流的形式发送请求到服务器端,服务器端也以消息流的形式进行响应。调用必须由客户端发起,但在此之后,通信完全基于 gRPC 客户端和服务器端的应用程序逻辑。 为什么有了双向流模式…...
五分钟,Docker安装kafka 3.5,kafka-map图形化管理工具
首先确保已经安装docker,如果是windows安装docker,可参考 wsl2安装docker 1、安装zk docker run -d --restartalways -e ALLOW_ANONYMOUS_LOGINyes --log-driver json-file --log-opt max-size100m --log-opt max-file2 --name zookeeper -p 2181:218…...
2023.11.18html中如何使用input/button进行网页跳转
2023.11.18html中如何使用input/button进行网页跳转 在做网页时有时会用元素,有时会用元素进行form表单操作或者网页跳转,但是用bootstrap时两种元素会出现不同的样式,为了样式一致,有时需要使用这两种元素相互实现其常用功能。 …...
java文件压缩加密,使用流的方式
使用net.lingala.zip4j来进行文件加密压缩。 添加依赖net.lingala.zip4j包依赖,这里使用的是最新的包2.11.5版本。 <dependency><groupId>net.lingala.zip4j</groupId><artifactId>zip4j</artifactId><version>${zip4j.versi…...
月子会所信息展示服务预约小程序的作用是什么
传统线下门店经营只依赖自然流量咨询或简单的线上付费推广是比较低效的,属于靠“天”吃饭,如今的年轻人学历水平相对较高,接触的事物或接受的思想也更多更广,加之生活水平提升及互联网带来的长期知识赋能,因此在寻找/咨…...
Windows核心编程 静态库与动态库
资源文件 .rc 文件 会被 rc.exe 变成 .res 文件(二进制文件) 在链接时链接进入 .exe 文件 一、如何保护源码 程序编译链接过程 不想让别人拿到源代码,但是想让其使用功能,根据上图观察,把自己生成的obj给对方,对方拿到obj后&…...
【Spring Boot】如何自定义序列化以及反序列器
在我们使用默认的消息转换器,将java的Long类型通过json数据传输到前端JS时,会导致Long类型的精度丢失,这是因为JS处理Long类型数字只能精确到前16位,所以我们可以采用自定义序列化方式将Long类型数据统一转为String字符串…...
6 Redis的慢查询配置原理
1、redis的命令执行流程 redis的慢查询只针对步骤3 默认情况下,慢查询的阈值是10ms...
JAVA小游戏 “拼图”
第一步是创建项目 项目名自拟 第二部创建个包名 来规范class 然后是创建类 创建一个代码类 和一个运行类 代码如下: package heima; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.KeyEvent; import …...
Spring 配置
配置文件最主要的目的 : 解决硬编码的问题(代码写死) SpringBoot 的配置文件,有三种格式 1.properties 2.yaml 3.yml(是 yaml 的简写) SpringBoot 只支持三个文件 1.application.properties 2.application.yaml 3.application.yml yaml 和 yml 是一样的,学会一个就行…...
全新酷盒9.0源码:多功能工具箱软件的最新iapp解决方案
全能工具箱软件酷盒:源码提供iapp解决方案,自定义打造个性化体验 酷盒是一款功能丰富的工具箱软件,内置众多实用功能,并实时更新热门功能。该软件还拥有丰富的资源库,用户可以在线畅玩游戏、免费下载音乐等。 我们提…...
aspose.cells java合并多个excel
背景 有需求需要把多个excel合并到一个excel文件里面,之前一直都是用python来处理办公自动化的东西,但是这个需求用python的openxyl库处理基本只能合并数据,样式没办法一比一合并过去,找了很多解决方案都没法实现,所以…...
【每日一题】三个无重叠子数组的最大和
文章目录 Tag题目来源题目解读解题思路方法一:滑动窗口 写在最后 Tag 【滑动窗口】【数组】【2023-11-19】 题目来源 689. 三个无重叠子数组的最大和 题目解读 解题思路 方法一:滑动窗口 单个子数组的最大和 我们先来考虑一个长度为 k 的子数组的最…...
react之基于@reduxjs/toolkit使用react-redux
react之基于reduxjs/toolkit使用react-redux 一、配置基础环境二、使用React Toolkit 创建 counterStore三、为React注入store四、React组件使用store中的数据五、实现效果六、提交action传递参数七、异步状态操作 一、配置基础环境 1.使用cra快速创建一个react项目 npx crea…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了: 这一篇我们开始讲: 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下: 一、场景操作步骤 操作步…...
HTML 列表、表格、表单
1 列表标签 作用:布局内容排列整齐的区域 列表分类:无序列表、有序列表、定义列表。 例如: 1.1 无序列表 标签:ul 嵌套 li,ul是无序列表,li是列表条目。 注意事项: ul 标签里面只能包裹 li…...
智能在线客服平台:数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展,消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁,不仅优化了客户体验,还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用,并…...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日,国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解,“超级…...
基于IDIG-GAN的小样本电机轴承故障诊断
目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) 梯度归一化(Gradient Normalization) (2) 判别器梯度间隙正则化(Discriminator Gradient Gap Regularization) (3) 自注意力机制(Self-Attention) 3. 完整损失函数 二…...
虚拟电厂发展三大趋势:市场化、技术主导、车网互联
市场化:从政策驱动到多元盈利 政策全面赋能 2025年4月,国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》,首次明确虚拟电厂为“独立市场主体”,提出硬性目标:2027年全国调节能力≥2000万千瓦࿰…...
通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器
拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件: 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...
