代码模版-实现form表单输入框和label统一对齐，vue elementui

文章目录

• 背景
• 代码

背景

通过 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" 改输入框长度即可

<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>