代码模版-实现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>