文章目录
背景
通过 vue + elementUI 实现 form 表单中输入框还有 label 统一对齐
代码
el-form 中每个 el-form-item 都是一个单独的小项目,默认 el-form-item 都是换行的,除非加上:inline="true"
属性,就是表示弄成一行
想设置对齐的话,先可以设置 label-width
属性表示前面每个 label 宽度是多少,然后设置 label-position
属性 right 表示右对齐,即可对齐,但是不想都弄成 1 列,可以让他们都是 1 行,:inline="true"
再对齐即可
有的输入框长度不一致,前端谷歌调试后,通过 style="width:203px"
改输入框长度即可
html
<el-form label-position="right" label-width="80px" :model="formLabelAlign">
<el-form-item label="名称">
<el-input v-model="formLabelAlign.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-input v-model="formLabelAlign.region"></el-input>
</el-form-item>
<el-form-item label="活动形式">
<el-input v-model="formLabelAlign.type"></el-input>
</el-form-item>
</el-form>