程序开发 · 2025年1月5日

Element UI 表单 label 标签为何出现在上方?

element-label标签里的文字为何出现在上方?

您提供的代码中,部分表单项的label标签里的文字出现在输入框上方。这是因为使用了el-form组件的label-width属性,该属性控制label标签的宽度。

官网示例中的label标签在左边

在element ui的官方文档中展示的表单项label标签都在输入框左边,这是因为使用了以下代码:

<el-form label-position="top">
  ...
</el-form>

登录后复制

label-指定label标签的位置,”top”表示在输入框上方,”right”表示在输入框右边,默认值为”left”表示在输入框左边。

解决方案:调整label-width和label-position属性

要将label标签移动到输入框左边,可以调整label-width和label-position属性:

<el-form label-width="auto" label-position="left">
  ...
</el-form>

登录后复制

  • label-width=”auto”允许label标签自动调整宽度以适应其内容。
  • label-position=”left”将label标签放在输入框左边。

调整后,label标签将出现在输入框的左边,如下图所示:

[图片]

以上就是Element UI 表单 label 标签为何出现在上方?的详细内容,更多请关注GTHOST其它相关文章!