怎样做google网站,电子商务网站有哪些?,wordpress分页插件,公司官方网站推广策划需求#xff1a;
#xff08;1#xff09;数据联动#xff1a;测试数据1、2互相依赖#xff0c;测试数据1测试数据2,测试数据2测试数据1。
#xff08;2#xff09;点击添加按钮#xff0c;添加一行。 #xff08;3#xff09;自定义操作按钮。 #xff0… 需求
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] useStateboolean(false);const actionRef useRefFormListActionType{name: string;[key: string]: any;}();const childrenDom (record: Recordstring, any) {return (ProForm.Group keygroupProFormDependency name{[test2]}{(depValues) {return (ProFormTextdisabled{record.disabled}widthmdnametest1label测试数据1rules{[{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));}},},]}/);}}/ProFormDependencyProFormDependency keyglobalUseMode name{[test1]}{(depValues) {return (ProFormTextdisabled{record.disabled}widthmdnametest2label测试数据2rules{[{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}labelTestinitialValue{[{}]}actionRef{actionRef}actionRender{(field, action, defaultActionDom, count) {return [...defaultActionDom,StopOutlinedkeydisablestyle{{ 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点击自定义操作按钮禁用禁用当前行。
