element-ui中el-form-item相关的问题

• Z时代
• 2024-03-07
• 分类：IT

问题描述

在el-input中设置type=textarea时,导致el-form-item中的label无法垂直居中显示

问题出现的环境背景及自己尝试过哪些方法

在各个地方尝试加style='vertical-align:middle',但没有效果,F12发现是因为当el-input高度由于type变化时,lable高度并没有改变.于是设置el-form-item的label高度,也没有效果.

相关代码

粘贴代码文本（请勿用截图）

  <el-row style="vertical-align:middle;">
    <el-col :xs="48" :sm="48" :md="24" :lg="16" :xl="16" style="vertical-align:middle;"> 
        <el-form-item label="用户名" prop="aaa" style="vertical-align:middle;height:138px;">
          <el-input v-model="sourceForm.aaa" type="textarea" :rows="6" placeholder="" clearable size="medium" />
        </gs-form-item>
    </el-col>
  </el-row>

你期待的结果是什么？实际看到的错误信息又是什么？

希望label能够垂直居中显示

回答：

<el-form-item label="用户名" prop="aaa" class="textarea-label">
    <el-input v-model="form.aaa" type="textarea" :rows="6" placeholder="" clearable size="medium" />
</el-form-item>

.textarea-label .el-form-item__label{
    line-height: 138px;
}

以上是 element-ui中el-form-item相关的问题 的全部内容， 来源链接： utcz.com/p/935551.html