From 1a43142252328adf1d0870e8e406f7d0fa70af65 Mon Sep 17 00:00:00 2001 From: George Tan <406132614@qq.com> Date: Tue, 28 Dec 2021 18:46:03 +0800 Subject: [PATCH] fix(form component): fix form 'vertical' layout row width (#1535) --- src/components/Form/src/hooks/useLabelWidth.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Form/src/hooks/useLabelWidth.ts b/src/components/Form/src/hooks/useLabelWidth.ts index fb96ee3d..3befa1c2 100644 --- a/src/components/Form/src/hooks/useLabelWidth.ts +++ b/src/components/Form/src/hooks/useLabelWidth.ts @@ -1,7 +1,6 @@ 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, propsRef: Ref) { @@ -14,6 +13,7 @@ export function useItemLabelWidth(schemaItemRef: Ref, propsRef: Ref< 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, propsRef: Ref< return { labelCol: { style: { width }, ...col }, - wrapperCol: { style: { width: `calc(100% - ${width})` }, ...wrapCol }, + wrapperCol: { + style: { width: layout === 'vertical' ? '100%' : `calc(100% - ${width})` }, + ...wrapCol, + }, }; }); }