el-col中的el-form向左对齐
时间: 2023-06-22 10:29:03 浏览: 1126
Vue中el-form标签中的自定义el-select下拉框标签功能
如果你想在 `el-col` 中的 `el-form` 组件中实现左对齐,可以通过将 `label-width` 属性设置为一个较小的值,如 `80px`,来实现。
例如,以下代码将创建一个 `el-form` 组件,其中包含两个表单项,每个表单项占据一个 `el-col`,并且两个 `el-col` 在左侧对齐:
```
<template>
<el-form label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="姓名">
<el-input></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="年龄">
<el-input></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
```
在这个例子中,我们将 `el-form` 的 `label-width` 属性设置为 `80px`,这将使 `el-form-item` 的标签宽度为 `80px`。然后,我们将两个表单项分别包含在两个 `el-col` 中,这两个 `el-col` 将根据其 `span` 属性在 `el-row` 中占据相应的宽度。最后,两个 `el-col` 将在左侧对齐。
阅读全文