fix(form component): fix form 'vertical' layout row width (#1535)

George Tan · GitHub
1 parent 52e295f1
Showing 1 changed file with 6 additions and 3 deletions
src/components/Form/src/hooks/useLabelWidth.ts
 import type { Ref } from 'vue';
-import type { FormProps, FormSchema } from '../types/form';
-
 import { computed, unref } from 'vue';
+import type { FormProps, FormSchema } from '../types/form';
 import { isNumber } from '/@/utils/is';
  
 export function useItemLabelWidth(schemaItemRef: Ref<FormSchema>, propsRef: Ref<FormProps>) {
@@ -14,6 +13,7 @@ export function useItemLabelWidth(schemaItemRef: Ref&lt;FormSchema&gt;, propsRef: Ref&lt;
       labelWidth: globalLabelWidth,
       labelCol: globalLabelCol,
       wrapperCol: globWrapperCol,
+      layout,
     } = unref(propsRef);
  
     // If labelWidth is set globally, all items setting
@@ -33,7 +33,10 @@ export function useItemLabelWidth(schemaItemRef: Ref&lt;FormSchema&gt;, propsRef: Ref&lt;
  
     return {
       labelCol: { style: { width }, ...col },
-      wrapperCol: { style: { width: `calc(100% - ${width})` }, ...wrapCol },
+      wrapperCol: {
+        style: { width: layout === 'vertical' ? '100%' : `calc(100% - ${width})` },
+        ...wrapCol,
+      },
     };
   });
 }