Ant Design+react 表单只读

news2024/10/6 10:35:30

表单禁用,样式不好看,不符合甲方标准,看了一下文档,select、radio等都不支持只读状态。
解决方法:
利用css3的point-events属性,设置为none
在查看弹窗时,传入一个变量,当变量为true时,设置className样式,否则不作操作
point-events可以阻止点击事件的效果,以及鼠标指针显示
实现效果图:
在这里插入图片描述
鼠标点击不会有任何操作,也不会切换radio和select下拉
代码:

<Form.Item label="类型" name="questionType">
	//isCheckInfo是打开弹窗时传的变量,为true时是查看,需要加个样式,阻止鼠标事件
	<Radio.Group className={isCheckInfo?'read-only':''}>
    	<Radio.Button value={0}>一般问题</Radio.Button>
        <Radio.Button value={1}>业务问题</Radio.Button>
	</Radio.Group>
</Form.Item>
<Form.Item label="选择分组" required name="questionGroupId">
	<Select className={isCheckInfo?'read-only':''} options={[{ value: '0', label: '默认分组' }]} />
</Form.Item>

css

.read-only{
  pointer-events: none;
}

一行css解决!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AI视频教程下载:用LangChain开发 ChatGPT和 LLMs 应用

在这个快速变化的人工智能时代&#xff0c;我们为您带来了一场关于语言模型和生成式人工智能的革命性课程。这不仅仅是一个课程&#xff0c;而是一次探险&#xff0c;一次深入人工智能核心的奇妙之旅。 在这里&#xff0c;您将开启一段激动人心的旅程&#xff0c;探索语言模型…

springboot启动报端口被占用,修改端口还是报被占用,如何处理?

第一种方式&#xff1a; 通过cmd查看是否有程序占用端口 netstat -ano| findstr 端口号 杀死进程 taskkill -f -pid 进程号 如果未看到有程序占用该端口说明不是这个原因 第二种方式&#xff1a; 打开任务管理器 查看是否进程占用对应端口&#xff0c;有就关闭进程 第三种…

Splashtop正式入驻长三角(杭州)制造业数字化能力中心,赋能企业向数字化转型

2024年6月&#xff0c;Splashtop正式入驻长三角&#xff08;杭州&#xff09;制造业数字化能力中心。作为全球领先的远程桌面控制软件供应商&#xff0c;Splashtop致力于提供适用于远程办公、IT 和 MSP 远程支持等多场景的高性能远程桌面控制软件和解决方案&#xff0c;赋能企业…

媲美飞书,类notion团队协作工具!【送源码】

Notion相信很多人都使用过&#xff0c;可能有很多人因为服务器问题想找到一个离线替代品。 今天&#xff0c;了不起向大家推荐一款开源、多语言、自托管的团队协作和项目管理工具 - Focalboard。 简介 Focalboard是一个由Mattermost开发的功能强大的开源项目管理和协作工具&a…

【数据挖掘】使用RFE进行特征选择

写在前面&#xff1a; 首先感谢兄弟们的订阅&#xff0c;让我有创作的动力&#xff0c;在创作过程我会尽最大能力&#xff0c;保证作品的质量&#xff0c;如果有问题&#xff0c;可以私信我&#xff0c;让我们携手共进&#xff0c;共创辉煌。 路虽远&#xff0c;行则将至&#…

25届最近5年南京航空航天大学自动化考研院校分析!

南京航空航天大学 一、学校学院专业简介 二、考试科目指定教材 1、考试科目介绍 2、指定教材介绍 三、近5年考研分数情况 以下为南京航空航天大学&#xff0c;自动化学院近几年的考研分数情况。 以下为南京航空航天大学&#xff0c;航天学院近几年的考研分数情况。 以下为南京…

企业如何运用信息化、智能化、数字化等技术手段规避企业合同风险?

在企业运营中&#xff0c;合同管理是至关重要的一环。它涉及到企业的各个方面&#xff0c;从供应链管理到客户关系&#xff0c;从财务交易到法律合规。然而&#xff0c;传统的合同管理方式往往存在效率低下、风险控制不足等问题。 随着信息化、智能化和数字化技术的发展&#…

博物馆室内导航系统的技术革新:3D地图与智能算法打造沉浸式观展体验

随着科技的不断进步&#xff0c;博物馆作为文化传承的重要场所&#xff0c;正面临着数字化转型的挑战与机遇。本文将介绍一种新型的博物馆室内导航系统&#xff0c;它通过3D地图和智能算法&#xff0c;为参观者提供了一种全新的沉浸式观展体验。 一、博物馆室内导航系统的优势…

yolo水果品质:新鲜腐烂橙子检测/分类数据集(3k+图像全标注)

yolo水果品质检测之新鲜腐烂橙子数据集&#xff0c;整个数据集共包含3852张图像&#xff0c;yolo标注完整&#xff08;txt格式&#xff09;,标注类别分为新鲜橙子&#xff08;0&#xff09;和腐烂橙子&#xff08;1&#xff09;两类 图像统一格式&#xff1a;jpg 图像统一分辨…

人工智能绘画的历史

人工智能绘画的起源可以追溯到20世纪50年代。当时&#xff0c;艺术家和科学家开始使用计算机生成图像和图形&#xff0c;将绘画艺术与技术领域相结合。计算机图像可以被视为人工智能绘画的一部分。下面&#xff0c;我们将按照时间顺序来了解人工智能绘画发展的一些关键时间节点…

【计算机毕业设计】基于SSM++jsp的在线医疗服务系统【源码+lw+部署文档】

包含论文源码的压缩包较大&#xff0c;请私信或者加我的绿色小软件获取 免责声明&#xff1a;资料部分来源于合法的互联网渠道收集和整理&#xff0c;部分自己学习积累成果&#xff0c;供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者…

如何快速上手Python,成为一名数据分析师

如何快速上手Python&#xff0c;成为一名数据分析师 成为一名数据分析师需要掌握Python编程语言以及数据分析相关的知识和技能。以下是一些步骤和建议&#xff0c;帮助你快速上手Python并成为一名数据分析师&#xff1a; 学习Python基础知识&#xff1a;首先&#xff0c;你需要…

我找到了全网最低价买服务器的 bug !!!

拍断大腿 周五&#xff0c;放松一下&#xff0c;给大家分享下我最近的事儿&#xff0c;以及带大家薅个&#xff08;可能会有&#xff09;的羊毛。 上个月&#xff0c;家里买了 Apple TV&#xff08;可理解为苹果的电视盒子&#xff09;装了 infuse&#xff08;一个在电视盒子上…

(南京观海微电子)——屏幕材质及优缺点对比

LED/LCD LCD&#xff08;Liquid Crystal Ddisplay&#xff09;即“液晶显示器”&#xff0c;由两块偏光镜、两块薄膜晶体管以及彩色滤光片、光源&#xff08;荧光灯&#xff09;、显示面板组成的成像元器件。 LED&#xff08;Light Emitting Diode&#xff09;即“发光二极管…

Excel 交叉表的格转成列,行转成格

Excel里交叉表的左表头是卡车号&#xff0c;上表头是工作&#xff0c;交叉格是工作编号。 ABCD1Truck NumberJob1Job2Job3271592859285928372395859282971473297159282971 要求&#xff1a;将交叉格转为列&#xff0c;左表头转为格。 ABC1297139585928272727137371473715726…

http和https数据传输与协议区分

目录 1. 数据传输安全性2. 端口号3. URL 前缀4. SSL/TLS 证书5. 性能6. SEO 和用户信任7. 应用场景总结 HTTP&#xff08;HyperText Transfer Protocol&#xff09;和 HTTPS&#xff08;HyperText Transfer Protocol Secure&#xff09;是用于在客户端&#xff08;如浏览器&…

Linux Mint 默认禁用未经验证的 Flatpak 软件包

Linux Mint 默认禁用未经验证的 Flatpak 软件包 Linux Mint 新政策 Linux Mint 项目宣布了一项新政策&#xff0c;即默认禁用那些未经官方验证的 Flatpak 软件包&#xff0c;以增强用户的安全保障。 当用户选择启用未经验证的 Flatpak 软件包时&#xff0c;Linux Mint 的软…

从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战三(引入ElementPlus图标)

步骤 项目中引入ElementPlus图标分3步&#xff1a; 1.安装图标库 pnpm install element-plus/icons-vue2.main.ts导入 import * as ElementPlusIconsVue from "element-plus/icons-vue";const app createApp(App); for (const [key, component] of Object.entri…

gbase 扩容 集群数据同步 主备切换

问题&#xff1a; 问题1磁盘满 1.原本是100G的大小&#xff0c;我们实际还没接入真正业务&#xff0c;昨日空间满了&#xff0c;需要帮忙看下是什么原因导致磁盘满的吗 数据库是每天备份一次&#xff0c;是不是备份的太频繁&#xff0c;还是数据量的问题导致&#xff0c;需要…

IDEA2023.1.4配置springboot项目

新建“Spring Initializr”项目 勾选以下三个依赖项即可。 springboot分为代码层、资源层和测试层。 代码层 根目录&#xff1a;src/main/java 入口启动类及程序的开发目录。在这个目录下进行业务开发、创建实体层、控制器层、数据连接层等。 资源层 根目录&#xff1a;src…