基于Element-UI的form表单封装

1.创建公共子组件/src/component/form.vue

    template里边

      <!-- 详细参照elementui官网：https://element.eleme.io/#/zh-CN/component/form#form-item-methods -->
      <!-- 表单属性解释  1.model：表单数据对象  2.rules：表单验证规则 3.ref：表单名称  4.label-width：标签宽度-->
      <!-- 表单绑定数据  1.formData在script中声明，标识表单提交数据，书组件传参过来   2.formconfig：formconfig.labeWidth标签宽度、formconfig.rules表单规则、formconfig.itemList表单绑定字段-->
        <el-form :model="formData" :rules="formconfig.rules" ref="ruleForm" :label-width="formconfig.labeWidth+'px'" >
         <el-form-item v-for="(item,index) of formconfig.itemList" :key="index" :label="item.label" :prop="item.prop" :class="item.type">
           <el-input v-if="item.type =='input'" v-model="formData[item.prop]" :disabled="item.disabled" :placeholder="item.placeholder"></el-input>
           <el-select v-if="item.type =='select'" v-model="formData[item.prop]" :placeholder="item.placeholder">
             <el-option v-for="(item,index) of item.option" :key="index" :label="item.label" :value="item.value"></el-option>
           </el-select>
           <el-date-picker v-if="item.type =='datapicker'" type="date" :placeholder="item.placeholder" v-model="formData[item.prop]" :style="{width: item.width}" ></el-date-picker>
           <el-time-picker v-if="item.type =='timepicker'" :placeholder="item.placeholder" v-model="formData[item.prop]" :style="{width: item.width}"></el-time-picker>
           <el-switch v-if="item.type =='switch'" v-model="formData[item.prop]"></el-switch>
           <el-checkbox-group v-if="item.type =='checkbox'" v-model="formData[item.prop]">
             <el-checkbox v-for="(item) of item.checkboxs" :key="item.value" :label="item.label" >{{item.label}}</el-checkbox>
           </el-checkbox-group>
           <el-radio-group v-if="item.type =='radio'" v-model="formData[item.prop]">
             <el-radio v-for="(item) of item.radios" :key="item.value" :label="item.label"></el-radio>
           </el-radio-group>
           <el-input v-if="item.type =='textarea'" type="textarea" v-model="formData[item.prop]"></el-input> 
         </el-form-item>
  <el-form-item>
         <el-row>
            <el-button v-for="(item,index) of formconfig.btnarry" :key="index" @click="submitForm('ruleForm',item)"
            :size="item.size" :type="item.type" :disabled="item.disabled"
            >{{item.name}}</el-button>
        </el-row>
  </el-form-item> 
</el-form>

  script里边

// 父组件传参
    props:{
        formconfig:Object,
        formData:Object,
    },
    methods: {
      // 表单规则验证
      submitForm(formName,type) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 按钮事件为清空表单内容时触发
            if (type.click == 'clrear') {
                this.resetForm('ruleForm')
            }
            // 不为空把表单值传入父组件
            this.$emit('formDataval',this.formData)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 清空表单事件
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }

2.父组件使用/views/FormField.vue
  template里边

<form-filed :formconfig="dialogconfig.formconfig" :formData="dialogconfig.formData" @formDataval="formDataval" />

  script里边

formconfig:{
  labeWidth:100,//表单宽度
  itemList:[//表单的list
    {type:'input',prop:'input',placeholder:'请输入内容',label:'内容'},
    {type:'select',prop:'select',placeholder:'请选择内容',label:'选择',
          option:[{label:'选择一',value:'key1'},{label:'选择二',value:'key2'}]
    },
    {type:'datapicker',prop:'datapicker',placeholder:'请选择日期',label:'日期',},
    {type:'timepicker',prop:'timepicker',placeholder:'请选择时间',label:'时间',},
    {type:'switch',prop:'switch',label:'开关',},
    {type:'checkbox',prop:'checkbox',label:'选择',
          checkboxs:[
             {label:'选择一',value:'key1'},
             {label:'选择二',value:'key2'},
             ]
    },
     {type:'radio',prop:'radio',label:'选择单个',
          radios:[
              {label:'选择一',value:'key1'},
              {label:'选择二',value:'key2'},
             ]
     },
     {type:'textarea',prop:'textarea',label:'区域',},
  ],
  rules:{//表单的匹配规则
     input:[
         { required: true, message: '请输入内容', trigger: 'blur' },
           ],
     select:[
         { required: true, message: '请选择内容', trigger: 'change' },
           ],
     datapicker:[
         { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
           ],
     timepicker:[
         { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
           ],
     checkbox:[
         { type: 'array', required: true, message: '请至少选择一个内容', trigger: 'change' }
           ],
     radio:[
         { required: true, message: '请选择内容', trigger: 'change' }
           ],
     textarea:[
         { required: true, message: '请填写活动形式', trigger: 'blur' }
            ]
         },
     btnarry:[//表单按钮
         {name:'创建',click:'add',type:'primary'},
         {name:'修改',click:'update'},
         {name:'删除',click:'delete'},
         {name:'清空',click:'clrear'}
        ]
  },
  formData:{//表单提交数据，
       checkbox:[],//注：如果类型是checkbox，必须foemData里边提前声明数组
      },

script中的方法

methods:{
   dialogClick(val){
      console.log(val,'接受子组件的数据');
   }
},
components:{
   FormFiled:()=>import('../../../components/form.vue'),
},