element之表单el-form布局

element表单el-form布局

最近表单用的比较多，简单总结一下

行内表单

普通表单

自定义表单

以上两个都是element官网的例子，但并不足以满足业务需求。例如下图：

element官方文档里并没有这种布局，那么直接上代码

<el-form label-width="150px">
  <el-row align="middle" :gutter="10">
    <el-col :span="10">
      <el-form-item prop="code" label="第一行第一个input:">
        <el-input v-model="form.input1"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="10">
      <el-form-item prop="name" label="第一行第二个input:">
        <el-input v-model="form.input2"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="20">
      <el-form-item prop="description" label="第二行:">
        <el-input v-model="form.input3"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>

export default {
  data() {
    return {
      form: {}
    }
  }
}

通过layout布局+form表单混用实现