element-plus [Component] [form] 表单控件内嵌套表单,外部表单label-position:top时,内部label-position会失效

ddarikpa  于 5个月前  发布在  其他
关注(0)|答案(6)|浏览(139)

Bug Type: Component

Environment

  • Vue Version: 3.2.31
  • Element Plus Version: 2.2.17
  • Browser / OS: edge,windows
  • Build Tool: Vite

Reproduction

  • el-form

Element Plus Playground

Steps to reproduce

外面表单设置top,内部的表单label-position就失效

What is Expected?

内部不要失效

What is actually happening?

内部的表单label-position就失效

Additional comments

(empty)

drnojrws

drnojrws1#

嵌套不需要再定义一个 el-form ,直接使用 el-form-item

oprakyz7

oprakyz72#

嵌套不需要再定义一个 el-form ,直接使用 el-form-item
你好,我觉得不能直接使用el-form-item。现在有一种情形,有两个vue组件,组件1中的el-form中的el-form-item里引用组件2,而组件二中也有一个el-form,当设置组件1的label-position:top时,组件2的label-position就会失效。在组件2中也不能直接使用el-form-item,因为该组件也有可能会单独使用。那这种情况是不是就有问题了呢

kwvwclae

kwvwclae3#

el-form往下遍历查找el-form-item时候,遇到内部的el-form就会停止,这个是期望行为,可以理解为两个嵌套的el-form是隔离的状态。

zxlwwiss

zxlwwiss4#

el-form往下遍历查找el-form-item时候,遇到内部的el-form就会停止,这个是期望行为,可以理解为两个嵌套的el-form是隔离的状态。

那如果2个el-form是隔离状态,为什么外部的el-form的label-position属性会影响内部el-form的label-position属性呢

ssm49v7z

ssm49v7z5#

我明白你意思了,其实没有影响,估计是样式优先级被覆盖了,导致没有正确显示。

lxkprmvk

lxkprmvk6#

我明白你意思了,其实没有影响,估计是样式优先级被覆盖了,导致没有正确显示。

我看了一下源码,确实组件已经隔离了,样式优先级的问题。组件没有对 .el-form--label-right 标签做处理,导致内嵌的右对齐使用了 .el-form--label-top 下的样式。

临时解决办法可以对 .el-form--label-right 进行额外的处理,在全局样式中添加如下样式:

.el-form--default.el-form--label-right {
  .el-form-item {
    display: flex;
    .el-form-item__label {
      display: inline-flex;
      margin-bottom: 0px;
      height: 32px;
      line-height: 32px;
    }
  }
}

相关问题