perf: Add the style injection of the top row to the form. (#102)

Co-authored-by: NorthLan <lan6995@gmail.com>

perf: Add the style injection of the top row to the form. (#102)
Co-authored-by: NorthLan <lan6995@gmail.com>
Lan · GitHub
1 parent dc09de1e
Showing 3 changed files with 13 additions and 1 deletions
src/components/Form/src/BasicForm.vue
src/components/Form/src/props.ts
src/components/Form/src/types/form.ts
 <template>
   <Form v-bind="{ ...$attrs, ...$props }" ref="formElRef" :model="formModel">
-    <Row :class="getProps.compact ? 'compact-form-row' : ''">
+    <Row :class="getProps.compact ? 'compact-form-row' : ''" :style="getRowWrapStyleRef">
       <slot name="formHeader" />
       <template v-for="schema in getSchema" :key="schema.field">
         <FormItem
@@ -71,6 +71,11 @@
       const schemaRef = ref<Nullable<FormSchema[]>>(null);
       const formElRef = ref<Nullable<FormActionType>>(null);
  
+      const getRowWrapStyleRef = computed((): any => {
+        const { baseRowStyle } = unref(getProps);
+        return baseRowStyle || {};
+      });
+
       const getMergePropsRef = computed(
         (): FormProps => {
           return deepMerge(cloneDeep(props), unref(propsRef));
@@ -207,6 +212,7 @@
         getActionPropsRef,
         defaultValueRef,
         advanceState,
+        getRowWrapStyleRef,
         getProps,
         formElRef,
         getSchema,
@@ -28,6 +28,9 @@ export const basicProps = {
     type: Object as PropType<any>,
     default: null,
   },
+  baseRowStyle: {
+    type: Object as PropType<any>,
+  },
   baseColProps: {
     type: Object as PropType<any>,
   },
@@ -53,6 +53,9 @@ export interface FormProps {
   // Col configuration for the entire form
   wrapperCol?: Partial<ColEx>;
  
+  // General row style
+  baseRowStyle?: object;
+
   // General col configuration
   baseColProps?: Partial<ColEx>;