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）点击自定义操作按钮（禁用），禁用当前行。