el-form 设置 label-width 左对齐
时间: 2023-08-06 15:04:39 浏览: 322
element中el-container容器与div布局区分详解
要让 `el-form` 中的表单项的 `label` 左对齐,可以通过设置 `label-width` 属性和 `text-align` 样式来实现。具体实现方法如下:
```html
<template>
<el-form label-width="100px">
<el-form-item label="姓名" style="text-align: left;">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" style="text-align: left;">
<el-input v-model="form.age"></el-input>
</el-form-item>
</el-form>
</template>
```
在上面的代码中,我们将 `label-width` 设置为 `100px`,然后在每个 `el-form-item` 中添加 `style` 属性,并设置其 `text-align` 样式为 `left`,即可让 `label` 左对齐。
需要注意的是,在设置 `label-width` 的时候,需要根据实际情况调整宽度,以免 `label` 文字过长导致表单布局错乱。
阅读全文