fix(form): fix `suffix` slot style

修复suffix插槽的样式问题

src/components/Form/src/components/FormAction.vue

@@ -1,40 +1,42 @@
 <template>
   <a-col v-bind="actionColOpt" :style="{ textAlign: 'right' }" v-if="showActionButtonGroup">
-    <FormItem>
+    <div style="width: 100%; text-align: right">
-      <slot name="resetBefore"></slot>
+      <FormItem>
-      <Button
+        <slot name="resetBefore"></slot>
-        type="default"
+        <Button
-        class="mr-2"
+          type="default"
-        v-bind="getResetBtnOptions"
+          class="mr-2"
-        @click="resetAction"
+          v-bind="getResetBtnOptions"
-        v-if="showResetButton"
+          @click="resetAction"
-      >
+          v-if="showResetButton"
-        {{ getResetBtnOptions.text }}
+        >
-      </Button>
+          {{ getResetBtnOptions.text }}
-      <slot name="submitBefore"></slot>
+        </Button>
+        <slot name="submitBefore"></slot>
 
-      <Button
+        <Button
-        type="primary"
+          type="primary"
-        class="mr-2"
+          class="mr-2"
-        v-bind="getSubmitBtnOptions"
+          v-bind="getSubmitBtnOptions"
-        @click="submitAction"
+          @click="submitAction"
-        v-if="showSubmitButton"
+          v-if="showSubmitButton"
-      >
+        >
-        {{ getSubmitBtnOptions.text }}
+          {{ getSubmitBtnOptions.text }}
-      </Button>
+        </Button>
 
-      <slot name="advanceBefore"></slot>
+        <slot name="advanceBefore"></slot>
-      <Button
+        <Button
-        type="link"
+          type="link"
-        size="small"
+          size="small"
-        @click="toggleAdvanced"
+          @click="toggleAdvanced"
-        v-if="showAdvancedButton && !hideAdvanceBtn"
+          v-if="showAdvancedButton && !hideAdvanceBtn"
-      >
+        >
-        {{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}
+          {{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}
-        <BasicArrow class="ml-1" :expand="!isAdvanced" up />
+          <BasicArrow class="ml-1" :expand="!isAdvanced" up />
-      </Button>
+        </Button>
-      <slot name="advanceAfter"></slot>
+        <slot name="advanceAfter"></slot>
-    </FormItem>
+      </FormItem>
+    </div>
   </a-col>
 </template>
 <script lang="ts">
@@ -43,7 +45,7 @@
   import { defineComponent, computed, PropType } from 'vue';
   import { Form, Col } from 'ant-design-vue';
   import { Button, ButtonProps } from '/@/components/Button';
-  import { BasicArrow } from '/@/components/Basic/index';
+  import { BasicArrow } from '/@/components/Basic';
   import { useFormContext } from '../hooks/useFormContext';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { propTypes } from '/@/utils/propTypes';

src/components/Form/src/components/FormItem.vue

@@ -326,10 +326,10 @@
             labelCol={labelCol}
             wrapperCol={wrapperCol}
           >
-            <>
+            <div style="display:flex">
-              {getContent()}
+              <div style="flex:1">{getContent()}</div>
               {showSuffix && <span class="suffix">{getSuffix}</span>}
-            </>
+            </div>
           </Form.Item>
         );
       }