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)点击自定义操作按钮(禁用),禁用当前行。

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

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

相关文章

To美术-渲染管线及优化方向(CPU方向)

一、CPU与GPU 1、CPU与GPU的区别 橙黄色&#xff1a;控制单元   橙红色&#xff1a;存储单元  绿色&#xff1a;计算单元 CPU:结构组成复杂、控制逻辑丰富&#xff0c;计算量小&#xff0c;适合复杂运算 GPU&#xff1a;结构组成简单&#xff0c;核心数量多&#xff0c;计…

吴恩达机器学习笔记2.1 - 什么是机器学习

吴恩达机器学习笔记2.1 - 什么是机器学习 最早的机器学习 1959年&#xff0c;亚瑟塞缪尔(Arthur Samuel)将机器学习定义为“Field of study that gives computers the ability to learn without being explicitly programmed”&#xff08;无需编程即可学习的研究领域&#xf…

ROS中不同文件之间的引用小结

在比较大的一些程序中&#xff0c;往往会涉及到一些不同模块的调用&#xff0c;如果这些东西放在一个.cpp文件内&#xff0c;这个文件会变的特别长&#xff0c;因此会使用多个文件互相引用。那么如何在ROS下进行这种不同文件下的引用呢&#xff0c;根据最近所学&#xff0c;简单…

tomcat 安装和优化

tomcatat tomcat和http一样&#xff0c;都是用来处理动态页面的 tomcat也可以作为web服务器&#xff0c;开源的 php.php tomcat.jsp nginx.html tomcat使用java代码写的程序&#xff0c;运行的是java的web服务程序 tomcat的特点和功能&#xff1a; 1、servlet容器&…

MySQL——第一次作业

部署MySQL 8.0环境 1&#xff0c;删除之前存在的MySQL程序 控制面板删除 2&#xff0c;删除完成后下载MySQL 官网&#xff1a; https://www.mysql.com 在window下下载MSI版本 3&#xff0c;自定义安装 4&#xff0c;配置环境变量 1&#xff0c;系统高级系统设置 2&#xff…

子序列问题

目录 最长递增子序列 摆动序列 最长递增子序列的个数 最长数对链 最长定差子序列 最长的斐波那契子序列的长度 最长等差数列 等差数列划分II-子序列 声明&#xff1a;接下来主要使用动态规划来解决问题&#xff01;&#xff01;&#xff01; 最长递增子序列 题目 思路…

如何通过文件分发系统,实现能源电力企业文件的安全分发流转?

随着企业业务的快速发展&#xff0c;能源电力企业会在全国乃至全球&#xff0c;设立总部-分部-办事处/网点等多层级的结构&#xff0c;因此会涉及自动化的文件分发的业务场景。文件分发系统是一种将文件从一个地方自动传输到多个接收者的过程&#xff0c;可以提高工作效率&…

香港优才计划多少分获批成功率高?一文看懂各分数段获批情况!

有留意香港优才计划的朋友&#xff0c;应该都了解过&#xff0c;申请优才计划采用打分制&#xff0c;得分多少与最终获批有密不可分的关系。但有一点要提前清楚&#xff0c;申请优才不是得分越高就一定能获批&#xff0c;也不是得分低就一定没希望。 香港优才计划能否获批成功…

正确理解驱动电流与驱动速度

本文主要阐述了在驱动芯片中表征驱动能力的关键参数&#xff1a;驱动电流和驱动时间的关系&#xff0c;并且通过实验解释了如何正确理解这些参数在实际应用中的表现。 驱动芯片概述 功率器件如MOSFET、IGBT需要驱动电路的配合从而得以正常地工作。图1显示了一个驱动芯片驱动一…

迅狐抖音机构号授权矩阵系统源码

在数字化营销的浪潮中&#xff0c;抖音以其独特的短视频形式迅速崛起&#xff0c;成为品牌传播和用户互动的重要平台。迅狐抖音机构号授权矩阵系统源码作为一项创新技术&#xff0c;为品牌在抖音上的深度运营提供了强大支持。 迅狐抖音机构号授权矩阵系统源码简介 迅狐抖音机…

新版Android Studio中设置gradle的JDK版本

旧版android studio 在旧版&#xff08;具体哪个版本号之前搞不清了&#xff09;中设置JDK版本在>File——>Project Structure——>SDK location——>Gradle Setting——>Gradle SDK 新版android studio 某次更新后发现SDK location下找不到Gradle Setting选项…

通过Vxlan实现数据中心互联有感

随着企业的发展&#xff0c;为满足跨地域运营、用户接入、异地灾备等场景&#xff0c;越来越多的企业通常在多地域部署多个数据中心。 数据中心互联DCl(Data Center Interconnection)是不同数据中心VM之间互相通信的一种解决方案使用VXLAN、BGP EVPN等技术&#xff0c;使数据中…

uniapp+uview实现手机端上传照片带水印(保姆级全过程)

目录 前言&#xff1a;实现思路 步骤一、在界面使用uview的u-upload组件、放置canvas标签 步骤二、在afterRead方法中获取照片url&#xff0c;并创建画布生成水印&#xff0c;再将生成水印的照片上传到服务器 1、afterRead方法 2、照片加水印的方法 3、上传照片至服务器 …

zookeeper加入开机启动项

Windows的任务计划程序&#xff08;Task Scheduler&#xff09;是一个强大的工具&#xff0c;允许你安排程序在特定时间自动运行&#xff0c;包括开机时。 打开任务计划程序&#xff1a; 按下Win R键&#xff0c;打开“运行”对话框。输入taskschd.msc并回车&#xff0c;打开…

Python编写网络嗅探器程序捕获和显示IP数据包的头部信息

Python编写网络嗅探器程序捕获和显示IP数据包的头部信息 抓取网络数据包并解析其中的IP首部信息&#xff0c;并通过GUI界面显示解析结果。程序展示了如何使用Python的socket和ctypes库来捕获和解析网络数据包,并使用Tkinter创建一个简单的GUI界面来显示捕获到的IP头部信息。这…

日志服务SLS入门指南

日志服务SLS入门指南 什么是日志服务SLSNginx日志采集部署Nginx创建Logstore接入数据 数据脱敏创建脱敏Logstore数据加工 告警设置添加告警规则查看告警 写在最后 什么是日志服务SLS 在说到日志服务SLS之前&#xff0c;首先了解一下什么是日志服务SLS&#xff1f;日志服务SLS是…

PHP项目中的前端页面随意点击卡片后会重定向到首页或登录页

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…

pycharm使用micropython

一、打开设置 2、搜索micropython、安装、重启 3、第5步需要设置成你插的电脑USB口&#xff0c;一个一个试 4、 5、 6、OK

手机数据恢复篇:优秀的 iPhone 数据恢复汇总

如果您不幸遭遇 iPhone 死机、进水或死机&#xff0c;一切还不算晚。您可以使用 iPhone 数据恢复应用恢复文件、照片、应用数据、消息等。 使用以下选项&#xff0c;您可以恢复 iPhone 上的少量内容、特定项目或所有内容。有些应用程序甚至提供修复工具来修复最初导致数据丢失…

这组杭州亚运会可视化大屏,绝对引领了时代。

本期分享杭州亚运会的可视化大屏&#xff0c;非常的震撼&#xff0c;杭州不愧为我国互联网最发达的的城市之一。 怒赞&#xff01;&#xff01;&#xff01;