element 表单封装

场景

我们开发用户信息注册，或者一些很多字断要用户自己填的时候，我们前端开发就会涉及到很多的input、select 等等，这些写多了就会造成代码的臃肿，我们就会想到表单的封装。表单的封装有很多种，我这里分享下自己封装的。

html部分

 <el-form label-width="155px">
     <el-form-item :label="field.label" :prop="field.prop" v-for="(field, index) in 
      formFields" :key="index">
       <component :ref="field.prop" :is="field.component" v-model="faultForm[field.prop]"      :type="field.type" :props="field.props" :placeholder="field.placeholder" size="mini" style="width: 95%">
          <el-option v-for="item in field.options" :key="item.value" :label="item.label" :value="item.value" v-if="field.component === 'el-select'"> </el-option>
       </component>
     </el-form-item>
 <el-form>

JS部分

 faultForm:{
     a1:"",//变量命名规范我这就不体现了
     a2:"",
},

formFields:[
      { label: '表单1', prop: 'a1', component: 'el-date-picker',placeholder: '请选择表单1',type:"date" },
      { label: '表单2', prop: 'a2', component: 'el-date-picker',placeholder: '请选择表单2',type:"date" },
      { label: '表单3', prop: 'a2', component: 'el-input',placeholder:'请选择表单3' },
      { label: '表单4', prop: 'a2', component: 'el-select',placeholder:'表单4',options: [{label:'a1',value:'a1'}] },
               
 ],