当前位置: 首页 > news >正文

ProFormList --复杂数据联动ProFormDependency

 需求:

(1)数据联动:测试数据1、2互相依赖,测试数据1<=测试数据2,测试数据2>=测试数据1。

(2)点击添加按钮,添加一行。

(3)自定义操作按钮。

(4)点击自定义操作按钮(禁用),禁用当前行。

代码实现:

import { StopOutlined } from '@ant-design/icons';
import { FormListActionType, ProCard, ProForm, ProFormDependency, ProFormList, ProFormText } from '@ant-design/pro-components';
import { gte, isEmpty, lte } from 'lodash';
import { useRef, useState } from 'react';const Demo = () => {const [refresh, setRefresh] = useState<boolean>(false);const actionRef = useRef<FormListActionType<{name: string;[key: string]: any;}>>();const childrenDom = (record: Record<string, any>) => {return (<ProForm.Group key="group"><ProFormDependency name={['test2']}>{(depValues) => {return (<ProFormTextdisabled={record.disabled}width="md"name="test1"label="测试数据1"rules={[{required: true,message: '必选字段不能为空',},{pattern: /^[-+]?[0-9]+(\.[0-9]+)?$/,message: '请输入正确的数字',},{validator: async (_, value) => {if (isEmpty(value) || isEmpty(depValues.test2)) {return Promise.resolve();}if (lte(parseInt(value), parseInt(depValues.test2))) {return Promise.resolve();} else {return Promise.reject(new Error('测试数据1不能大于测试数据2'));}},},]}/>);}}</ProFormDependency><ProFormDependency key="globalUseMode" name={['test1']}>{(depValues) => {return (<ProFormTextdisabled={record.disabled}width="md"name="test2"label="测试数据2"rules={[{required: true,message: '必选字段不能为空',},{pattern: /^[-+]?[0-9]+(\.[0-9]+)?$/,message: '请输入正确的数字',},{validator: async (_, value) => {if (isEmpty(value) || isEmpty(depValues.test1)) {return Promise.resolve();}if (gte(parseInt(value), parseInt(depValues.test1))) {return Promise.resolve();} else {return Promise.reject(new Error('测试数据2不能小于测试数据1'));}},},]}/>);}}</ProFormDependency></ProForm.Group>);};return (<ProForm submitter={false}><ProFormListname={'Test'}label="Test"initialValue={[{}]}actionRef={actionRef}actionRender={(field, action, defaultActionDom, count) => {return [...defaultActionDom,<StopOutlinedkey="disable"style={{ marginLeft: '5px' }}onClick={() => {const data = actionRef.current?.get(field.name);if (data) {data.disabled = true;setRefresh(!refresh);}}}/>,];}}itemRender={({ listDom, action }, { index, record }) => (<ProCard bordered style={{ marginBlockEnd: 8 }} title={`Test${index + 1}`} extra={action} bodyStyle={{ paddingBlockEnd: 0 }}>{childrenDom(record)}</ProCard>)}/></ProForm>);
};export default Demo;

结果展示:

重点代码截图:

(1)数据联动:测试数据1、2互相依赖,测试数据1<=测试数据2,测试数据2>=测试数据1。

(2)点击添加按钮,添加一行。

(3)自定义操作按钮。

(4)点击自定义操作按钮(禁用),禁用当前行。

相关文章:

ProFormList --复杂数据联动ProFormDependency

需求&#xff1a; &#xff08;1&#xff09;数据联动&#xff1a;测试数据1、2互相依赖&#xff0c;测试数据1<测试数据2,测试数据2>测试数据1。 &#xff08;2&#xff09;点击添加按钮&#xff0c;添加一行。 &#xff08;3&#xff09;自定义操作按钮。 &#xff0…...

Git、Github、tortoiseGit下载安装调试全套教程

一、Git 1.下载安装Git 编辑器可默认Vim&#xff0c;可换成别的&#xff0c;此处换成VScode&#xff0c;换成VScode或别的都需要单独下载和调用 &#xff08;1&#xff09;Git安装&#xff1a;https://www.cnblogs.com/xiuxingzhe/p/9300905.html 超级完整的 Git的下载、安…...

老师怎么快速发布成绩?

期末考试的钟声刚刚敲响&#xff0c;成绩单的发放却成了老师们的一大难题。每当期末成绩揭晓&#xff0c;老师们便要开始一项繁琐的任务——将每一份成绩单逐一私信给家长。这不仅耗费了大量的时间和精力&#xff0c;也让本就忙碌的期末工作变得更加繁重。然而&#xff0c;随着…...

央视揭露:上百元的AI填报高考志愿真的靠谱吗?阿里云新增两位AI圈“代言人”!|AI日报

文章推荐 MiniMax闫俊杰&#xff1a;国内模型远不及GPT-4&#xff1b;OpenAI隐瞒黑客曾入侵其内部系统&#xff5c;AI日报 今日热点 月之暗面、智联招聘成为阿里云新“代言人”&#xff0c;使用阿里云强大算力和大模型服务平台提升模型推理效率 7月8日&#xff0c;阿里云官…...

TPM管理咨询公司甄选指南

在竞争激烈的市场环境中&#xff0c;TPM&#xff08;全面生产维护&#xff09;管理咨询公司的重要性日益凸显。然而&#xff0c;如何在众多咨询公司中筛选出最适合自己企业的合作伙伴&#xff0c;成为了许多企业决策者面临的难题。本文将从专业度、行业经验、服务质量和性价比等…...

探索 Scikit-Learn:机器学习的强大工具库

Scikit-Learn 探索 Scikit-Learn&#xff1a;机器学习的强大工具库主要功能模块分类&#xff08;Classification&#xff09;回归&#xff08;Regression&#xff09;聚类&#xff08;Clustering&#xff09;降维&#xff08;Dimensionality Reduction&#xff09;模型选择&…...

音视频质量评判标准

一、实时通信延时指标 通过图中表格可以看到&#xff0c;如果端到端延迟在200ms以内&#xff0c;说明整个通话是优质的&#xff0c;通话效果就像大家在同一个房间里聊天一样&#xff1b;300ms以内&#xff0c;大多数人很满意&#xff0c;400ms以内&#xff0c;有小部分人可以感…...

如何在vue3中使用scss

一 要使用scss首先需要下载相关的包 可以在终端使用下面的命令下载相关包 npm install -D sass 二 在src文件下新建一个文件夹叫做styles 在文件夹下创建三个文件 index.scss主要用来引用其他文件 reset.scss用来清除默认的样式 variable.scss用来配置全局属性 三 需要在v…...

Gartner发布采用美国防部模型实施零信任的方法指南:七大支柱落地方法

零信任是网络安全计划的关键要素&#xff0c;但制定策略可能会很困难。安全和风险管理领导者应使用美国国防部模型的七大支柱以及 Gartner 研究来设计零信任策略。 战略规划假设 到 2026 年&#xff0c;10% 的大型企业将拥有全面、成熟且可衡量的零信任计划&#xff0c;而 202…...

Flutter——最详细(Badge)使用教程

背景 主要常用于组件叠加上圆点提示&#xff1b; 使用场景&#xff0c;消息数量提示&#xff0c;消息红点提示 属性作用backgroundColor红点背景色smallSize设置红点大小isLabelVisible是否显示offset设置红点位置alignment设置红点位置child设置底部组件 代码块 class Badge…...

SQLServer的系统数据库用别的服务器上的系统数据库替换后做跨服务器连接时出现凭证、非对称金钥或私密金钥的资料无效

出错作业背景&#xff1a; 公司的某个sqlserver服务器要做迁移&#xff0c;由于该sqlserver服务器上数据库很多&#xff0c;并且做了很多的job和维护计划&#xff0c;重新安装的sqlserver这些都是空的&#xff0c;于是就想到了把系统4个系统数据库进行替换&#xff0c;然后也把…...

vue前端面试

一 .v-if和v-show的区别 v-if 和 v-show 是 Vue.js 中两个常用的条件渲染指令&#xff0c;它们都可以根据条件决定是否渲染某个元素。但是它们之间存在一些区别。 语法&#xff1a;v-if 和 v-show 的语法相同&#xff0c;都接收一个布尔值作为参数。 <div v-if"show…...

【网络安全】Host碰撞漏洞原理+工具+脚本

文章目录 漏洞原理虚拟主机配置Host头部字段Host碰撞漏洞漏洞场景工具漏洞原理 Host 碰撞漏洞,也称为主机名冲突漏洞,是一种网络攻击手段。常见危害有:绕过访问控制,通过公网访问一些未经授权的资源等。 虚拟主机配置 在Web服务器(如Nginx或Apache)上,多个网站可以共…...

unattended-upgrade进程介绍

unattended-upgrade 是一个用于自动更新 Debian 和 Ubuntu 系统的软件包。这个进程通常用于定期下载并安装安全更新&#xff0c;以保持系统的安全性和稳定性。 具体来说&#xff0c;这个命令 /usr/bin/python3 /usr/bin/unattended-upgrade --download-only 表示运行 unattend…...

SpringBoot 中多例模式的神秘世界:用法区别以及应用场景,最后的灵魂拷问会吗?- 第519篇

历史文章&#xff08;文章累计500&#xff09; 《国内最全的Spring Boot系列之一》 《国内最全的Spring Boot系列之二》 《国内最全的Spring Boot系列之三》 《国内最全的Spring Boot系列之四》 《国内最全的Spring Boot系列之五》 《国内最全的Spring Boot系列之六》 《…...

基于STM32设计的智能婴儿床(ESP8266局域网)_2024升级版_180

基于STM32设计的智能婴儿床(采用STM32F103C8T6)(180) 文章目录 一、设计需求【1】项目功能介绍【2】程序最终的运行逻辑【3】硬件模块组成【4】ESP8266模块配置【5】上位机开发思路【6】系统功能模块划分1.2 项目开发背景1.3 开发工具的选择1.4 系统框架图1.5 系统原理图1.6 硬…...

C++(第四天----拷贝函数、类的组合、类的继承)

一、拷贝构造函数&#xff08;复制构造函数&#xff09; 1、概念 拷贝构造函数&#xff0c;它只有一个参数&#xff0c;参数类型是本类的引用。如果类的设计者不写拷贝构造函数&#xff0c;编译器就会自动生成拷贝构造函数。大多数情况下&#xff0c;其作用是实现从源对象到目…...

第一课:接口配置IP地址:DHCP模式

希望pc1,pc2,pc3自动分配到ip地址。 实验拓扑: 配置&#xff1a;高级一点的路由器还是手动配置&#xff1a; [R1]int g0/0/0 [R1-g0/0/0]ip address 192.168.1.1 255.255.255.0 打开PC1&#xff0c;切换到DHCP模式&#xff0c;点击应用&#xff0c;再到命令行输入ipconfig&…...

esp32_spfiffs

生成 spiffs image python spiffsgen.py <image_size> <base_dir> <output_file> eg, python spiffsgen.py 0x2000 ./folder hello.bin Arduino 的库有例子可以直接用于 OTA 升级 spiffs 分区 HTTPUpdateResult HTTPUpdate::updateSpiffs(HTTPClient &h…...

每日一练全新考试模式解锁|考试升级

&#x1f64b;频繁有小伙伴咨询&#xff1a;我想举办一场历时一个月的答题活动&#xff0c;学生可以每天打开答题&#xff0c;活动完结后可以导出每天的答题成绩 此前我们都会让小伙伴创建30场考试&#xff0c;然后使用批量分享功能组合起来&#xff0c;对外分享一个链接就可以…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

PH热榜 | 2025-06-08

1. Thiings 标语&#xff1a;一套超过1900个免费AI生成的3D图标集合 介绍&#xff1a;Thiings是一个不断扩展的免费AI生成3D图标库&#xff0c;目前已有超过1900个图标。你可以按照主题浏览&#xff0c;生成自己的图标&#xff0c;或者下载整个图标集。所有图标都可以在个人或…...

CVE-2023-25194源码分析与漏洞复现(Kafka JNDI注入)

漏洞概述 漏洞名称&#xff1a;Apache Kafka Connect JNDI注入导致的远程代码执行漏洞 CVE编号&#xff1a;CVE-2023-25194 CVSS评分&#xff1a;8.8 影响版本&#xff1a;Apache Kafka 2.3.0 - 3.3.2 修复版本&#xff1a;≥ 3.4.0 漏洞类型&#xff1a;反序列化导致的远程代…...

SFTrack:面向警务无人机的自适应多目标跟踪算法——突破小尺度高速运动目标的追踪瓶颈

【导读】 本文针对无人机&#xff08;UAV&#xff09;视频中目标尺寸小、运动快导致的多目标跟踪难题&#xff0c;提出一种更简单高效的方法。核心创新在于从低置信度检测启动跟踪&#xff08;贴合无人机场景特性&#xff09;&#xff0c;并改进传统外观匹配算法以关联此类检测…...

PostgreSQL 对 IPv6 的支持情况

PostgreSQL 对 IPv6 的支持情况 PostgreSQL 全面支持 IPv6 网络协议&#xff0c;包括连接、存储和操作 IPv6 地址。以下是详细说明&#xff1a; 一、网络连接支持 1. 监听 IPv6 连接 在 postgresql.conf 中配置&#xff1a; listen_addresses 0.0.0.0,:: # 监听所有IPv4…...

《开篇:课程目录》

大家好&#xff01;我是一名.NET技术开发者&#xff0c;长期以来积累了比较多的项目实战经验&#xff0c;现在把它分享给大家&#xff0c;希望能够帮助到大家&#xff0c;同时为.NET社区提供一份力量&#xff0c;让更多的开发者参与进来。 要讲解的课程如下&#xff1a; 《介绍…...