二次封装一个比较通用的elementUI表单

 一下代码仅添加input和select，如有需要还可以加入单选多选日期等

<template>
  <el-form :inline="inline" label-width="130px" :model="commonForm" ref="refCommonForm"  class="demo-dynamic">
    <div v-for="val in formLabel" :key="val.prop" :class="val.class">
        <!-- input -->
          <el-form-item
          :prop="val.prop"
          :label="val.label" v-if="val.type == ('input' || 'textarea')" 
          :rules="{ required: val.required, message: '该项为必填项',trigger: 'blur'}"
          >
          <el-input :type="val.type" v-model="commonForm[val.prop]" autocomplete="off" ></el-input>
        </el-form-item>

        <!-- select -->
        <el-form-item
          :prop="val.prop" 
          :label="val.label" v-if="val.type == 'select'"
          :rules="[{ required: val.required, message: '该项为必填项',trigger: 'change'}]" 
          >
          <el-select v-model="commonForm[val.prop]" :filterable="val.isSearch" placeholder="请选择">
            <el-option v-for="item in val.config.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
    </div>
    <slot></slot>
    <div class="t_c">
      <slot name="formOperate"></slot>
    </div>
  </el-form>
</template>


props: {
    inline: {Type: Boolean,default:false},
    commonForm:{Type:Object,default:()=>{} },
    formLabel:{Type:Array,default:()=>[] }
  },


handleSubmit(callback){
      this.$refs.refCommonForm.validate((valid) => {
        if (valid) {
          callback(this.commonForm)
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.refCommonForm.resetFields();
    },

如何使用：

​
<common-form ref="dialogForm" :commonForm="commonForm" :formLabel="formLabel">
   <template slot="formOperate">
       <el-button type="primary" @click="saveInfo">提交</el-button>
   </template>
</common-form>


-------------data---------------
commonForm:{name:'',type:''},
formLabel:[
   {prop:'name',label:'捕捞记录名称',type:'input',required:true,class:'form_inline'},
   {prop:'type',label:'捕捞种类',type:'input',required:true,class:'form_inline',config:{
        options:[
            {value:'鲤鱼',label:'鲤鱼'},
            {value:'小黄鱼',label:'黄鱼'},
        ]}
    }
]


-----------methods-----------
// 保存--修改/添加----调用表单的提交方法并得到返回的数据
    saveInfo(){
      this.$refs.dialogForm.handleSubmit(result=>{
        // 有id是修改，没有id是添加，result是弹出框中表单提交的数据
        if(result.id){
          //此处自己使用的是自己封装的http请求
          this.$http.post('updateCatchRecord',result,(res)=>{
            if(res.code == 200){
              this.dialogVisible = false;
              this.$message.success('修改成功！')
            }
          })
        }else{
          this.$http.post('addCatchRecord',result,(res)=>{
            if(res.code == 200){
              this.dialogVisible = false;
              this.$message.success('添加成功！')
            }
          })
        }
      });
    },

--------------css------------
/* 一行放两个，不加该class为一行一个的表单，
    此处封装方式不太好，有好的方法可以找我沟通哦 */
.form_inline{
  width:50%; display:inline-block
}

​