ElementUI 02 - 重置el-form-item的label宽度

4,651 阅读1分钟

1. 问题描述

通过Vue+Element配置Form,当在一排中排列多个el-col时,如果某个el-col的标签过于繁琐, 页面显示的结果就会很蹩脚,如下图所示:

image.png

如截图所示,最后一个el-col的label会自动进行换行处理。

此时问题代码:

image.png

2. 解决方案

查看element官网Form表单介绍,可发现,在"Form Attributes" 和 "Form-Item Attributes"中都有一个"label-width"属性。 其中,作为 Form 直接子元素的 form-item 会继承该值,我们当然也可以直接给子元素 form-item 设置"label-width",如下图:

image.png

给"form-item" 设置 "label-width"后,效果图如下:

image.png