diff --git a/src/components/Form/src/components/FormItem.vue b/src/components/Form/src/components/FormItem.vue index e6fc845f325..7198a9119a6 100644 --- a/src/components/Form/src/components/FormItem.vue +++ b/src/components/Form/src/components/FormItem.vue @@ -116,6 +116,21 @@ return disabled; }); + const getReadonly = computed(() => { + const { readonly: globReadonly } = props.formProps; + const { dynamicReadonly } = props.schema; + const { readonly: itemReadonly = false } = unref(getComponentsProps); + + let readonly = globReadonly || itemReadonly; + if (isBoolean(dynamicReadonly)) { + readonly = dynamicReadonly; + } + if (isFunction(dynamicReadonly)) { + readonly = dynamicReadonly(unref(getValues)); + } + return readonly; + }); + function getShow(): { isShow: boolean; isIfShow: boolean } { const { show, ifShow } = props.schema; const { showAdvancedButton } = props.formProps; @@ -280,6 +295,7 @@ size, ...unref(getComponentsProps), disabled: unref(getDisable), + readonly: unref(getReadonly), }; const isCreatePlaceholder = !propsData.disabled && autoSetPlaceHolder; @@ -305,7 +321,12 @@ return ; } const compSlot = isFunction(renderComponentContent) - ? { ...renderComponentContent(unref(getValues), { disabled: unref(getDisable) }) } + ? { + ...renderComponentContent(unref(getValues), { + disabled: unref(getDisable), + readonly: unref(getReadonly), + }), + } : { default: () => renderComponentContent, }; @@ -339,7 +360,7 @@ const { itemProps, slot, render, field, suffix, component } = props.schema; const { labelCol, wrapperCol } = unref(itemLabelWidthProp); const { colon } = props.formProps; - const opts = { disabled: unref(getDisable) }; + const opts = { disabled: unref(getDisable), readonly: unref(getReadonly) }; if (component === 'Divider') { return ( @@ -397,7 +418,7 @@ const realColProps = { ...baseColProps, ...colProps }; const { isIfShow, isShow } = getShow(); const values = unref(getValues); - const opts = { disabled: unref(getDisable) }; + const opts = { disabled: unref(getDisable), readonly: unref(getReadonly) }; const getContent = () => { return colSlot diff --git a/src/components/Form/src/types/form.ts b/src/components/Form/src/types/form.ts index 3f9fe157d46..0838de8b7d6 100644 --- a/src/components/Form/src/types/form.ts +++ b/src/components/Form/src/types/form.ts @@ -85,6 +85,8 @@ export interface FormProps { size?: 'default' | 'small' | 'large'; // Whether to disable disabled?: boolean; + // Whether to readonly + readonly?: boolean; // Time interval fields are mapped into multiple fieldMapToTime?: FieldMapToTime; // Placeholder is set automatically @@ -218,6 +220,8 @@ interface BaseFormSchema { dynamicDisabled?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean); + dynamicReadonly?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean); + dynamicRules?: (renderCallbackParams: RenderCallbackParams) => Rule[]; } export interface ComponentFormSchema extends BaseFormSchema {