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 {