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

Lan

2020-11-26 b9d3d60e0f8fe1166a0addcc8295365cbe65a7bf

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

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

 src/components/Form/src/BasicForm.vue

@@ -1,6 +1,6 @@
<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
@@ -70,6 +70,11 @@
      const propsRef = ref<Partial<FormProps>>({});
      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 => {
@@ -207,6 +212,7 @@
        getActionPropsRef,
        defaultValueRef,
        advanceState,
        getRowWrapStyleRef,
        getProps,
        formElRef,
        getSchema,

 src/components/Form/src/props.ts

@@ -28,6 +28,9 @@
    type: Object as PropType<any>,
    default: null,
  },
  baseRowStyle: {
    type: Object as PropType<any>,
  },
  baseColProps: {
    type: Object as PropType<any>,
  },

 src/components/Form/src/types/form.ts

@@ -53,6 +53,9 @@
  // Col configuration for the entire form
  wrapperCol?: Partial<ColEx>;

  // General row style
  baseRowStyle?: object;

  // General col configuration
  baseColProps?: Partial<ColEx>;