vueComponent/ant-design-vue

form 组件在layout为vertical时，修改表单项宽度异常

hanyefeng opened this issue · 3 comments

hanyefeng commented
  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.2.1

Environment

vue3.2.36

Reproduction link

Edit on CodeSandbox

Steps to reproduce

我在封装ant-design-vue时发现，在layout为vertical时 修改表单项宽度表现不太符合预期，
宽度变成了表单项宽度加上label宽度。

What is expected?

期望和ant-design一样，可以灵活修改表单项宽度

What is actually happening?

对比ant-design发现，ant-design-vue 的ant-form-item的子元素class名为ant-form-row 而不是ant-form-item-row，这样导致
.ant-form-vertical .ant-form-item-row { flex-direction: column } 样式丢失，子元素宽度会额外多一个label的宽度

hanyefeng commented

image
ant-design-vue 是.ant-form-row

hanyefeng commented

image
ant-design是.ant-form-item-row，带有flex-direction: column样式

hanyefeng commented
image 应该是 class={`${prefixCls.value}-item-row`}
  • ❤️2