基于react antd的表单显隐控制
基于react antd的表单显隐控制
显隐方法:
type FormConf = Record<string, any>;
export const defineFormConfig = (originForm: any, newForm: FormConf) => {
if (!isArray(originForm) || !isObject(newForm)) {
return originForm;
};
originForm.forEach((item: any) => {
if (item?.type !== 'select' && isArray(item?.lists)) {
defineFormConfig(item?.lists, newForm);
}
const conf = newForm[item?.key];
if (isObject(conf)) {
Object.assign(item, conf);
}
})
return originForm;
}
表单中的使用:
export const COL = [
{
key: 'id',
title: 'id',
visible: true,
},
{
key: 'parameterId',
title: 'parameterId',
disabled: true,
},
]
<Form
form={ form }
initialValues={ initAddValues }
onFinish={ handleSubmit }
layout="vertical"
>
{(
defineFormConfig(COL, {
parameterName: { disabled: modalTitle === t('edit') },
}) || []
).map((item: any) => {
const { title, required = false, disabled = false } = item;
return (
<Form.Item
label={ t(title) }
name={ title }
rules={ [{ required: required, message: t('pleaseEnter') }] }
>
{ title === 'parameterContent' ? <Input.TextArea /> : <Input disabled={ disabled } /> }
</Form.Item>
)
}
)}
</Form>
转载自:https://segmentfault.com/a/1190000042094728