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

http://www.lryc.cn/news/395485.html

相关文章:

  • Git、Github、tortoiseGit下载安装调试全套教程
  • 老师怎么快速发布成绩?
  • 央视揭露:上百元的AI填报高考志愿真的靠谱吗?阿里云新增两位AI圈“代言人”!|AI日报
  • TPM管理咨询公司甄选指南
  • 探索 Scikit-Learn:机器学习的强大工具库
  • 音视频质量评判标准
  • 如何在vue3中使用scss
  • Gartner发布采用美国防部模型实施零信任的方法指南:七大支柱落地方法
  • Flutter——最详细(Badge)使用教程
  • SQLServer的系统数据库用别的服务器上的系统数据库替换后做跨服务器连接时出现凭证、非对称金钥或私密金钥的资料无效
  • vue前端面试
  • 【网络安全】Host碰撞漏洞原理+工具+脚本
  • unattended-upgrade进程介绍
  • SpringBoot 中多例模式的神秘世界:用法区别以及应用场景,最后的灵魂拷问会吗?- 第519篇
  • 基于STM32设计的智能婴儿床(ESP8266局域网)_2024升级版_180
  • C++(第四天----拷贝函数、类的组合、类的继承)
  • 第一课:接口配置IP地址:DHCP模式
  • esp32_spfiffs
  • 每日一练全新考试模式解锁|考试升级
  • pyqt5图片分辨率导致的界面过大的问题
  • (三)前端javascript中的数据结构之集合
  • VuePress 的更多配置
  • 问题解决|Python 代码的组织形式与编码规范
  • Flask项目搭建及部署 —— Python
  • 【C++报错已解决】Invalid Use of ‘this’ Pointer
  • 群晖NAS配置WebDav服务结合内网穿透实现跨平台云同步思源笔记
  • 内容监管与自由表达:Facebook的平衡之道
  • 电脑桌面日历记事本怎么弄 好用的桌面日历记事本
  • #招聘数据分析#2024年6月前程无忧招聘北上广深成渝对比情况
  • STM32 IIC详解(软件模拟)