el-form二次封装

ComForm.vue

<template>
  <div class="comForm">
    <el-form :label-width="formConfig.labelWidth" :inline="formConfig.inline" :ref="formConfig.ref" :model="formParams">
      <el-form-item :label="item.label" v-for="(item, index) in formData" :key="index" :prop="item.prop" :rules="item.rules" :style="{width: item.width}">
        <el-input v-if="item.type === 'input'" v-model="formParams[item.prop]" :placeholder="item.placeholder"></el-input>
        <el-select v-if="item.type === 'select'" style="width: 100%" v-model="formParams[item.prop]" :placeholder="item.placeholder">
          <el-option :label="opItem.label" :value="opItem.value" v-for="(opItem, index) in item.options" :key="index"></el-option>
        </el-select>
        <el-date-picker v-if="item.type === 'date'" type="date" style="width: 100%" v-model="formParams[item.prop]" :placeholder="item.placeholder"></el-date-picker>
        <el-radio-group v-if="item.type === 'radio'" v-model="formParams[item.prop]" :placeholder="item.placeholder">
          <el-radio :label="opItem.label" v-for="(opItem, index) in item.options" :key="index" :rules="item.rules"></el-radio>
        </el-radio-group>
        <el-input v-if="item.type === 'textarea'" type="textarea" v-model="formParams[item.prop]" :placeholder="item.placeholder"></el-input>
        <el-switch v-if="item.type === 'switch'" v-model="formParams[item.prop]"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(formConfig.ref)">立即创建</el-button>
        <el-button @click="resetForm(formConfig.ref)">重置</el-button>
        </el-form-item>
    </el-form>
 </div>  
</template>

<script>
  export default {
    props: {
      formData: {
        type: Array,
        required: true,
        default: () => {
          return []
        }
      },
      formParams: {
        type: Object,
        required: true,
        default: () => {
          return {}
        }
      },
      formConfig: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {

      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.formParams)
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

组件使用

<template>
  <div id="app">
    <div style="width: 700px">
      <ComForm :formData="formData" :formParams="formParams" :formConfig="formConfig"></ComForm>
    </div>
  </div>
</template>

<script>
import ComForm from './components/ComForm.vue'

export default {
  name: 'App',
  components: {
    ComForm
  },
  data() {
    return {
      areaOptions: [
        {
          label: 111,
          value: 111
        },
        {
          label: 222,
          value: 222
        }
      ],
      formData: [
        {
          type: 'input',
          label: '姓名',
          prop: 'name',
          placeholder: '请输入姓名',
          rules: [{required: true, message: '姓名不能为空', trigger: 'blur'}]
        },
        {
          type: 'input',
          label: '年龄',
          prop: 'age',
          placeholder: '请输入年龄'
        },
        {
          type: 'select',
          label: '区域',
          prop: 'area',
          options: [],
          placeholder: '请选择区域'
        },
        {
          type: 'date',
          label: '活动日期',
          prop: 'date',
          placeholder: '请选择活动日期'
        },
        {
          type: 'radio',
          label: '性别',
          prop: 'gender',
          options: [
            {
              label: '男'
            },
            {
              label: '女'
            }
          ],
          placeholder: '请选择性别',

        },
        {
          type: 'switch',
          label: '状态',
          prop: 'status',
        },
        {
          type: 'textarea',
          label: '备注',
          prop: 'remark',
          placeholder: '请输入备注',
          width: '100%'
        }
      ],
      formParams: {
        name: '',
        age: '',
        area: '',
        date: '',
        gender: '',
        remark: '',
        status: false,
      },
      formConfig: {
        labelWidth: '100px',
        inline: false,
        ref: 'formRef'
      }
      
    }
  },
  methods: {
    
  },
  watch: {
    areaOptions: {
      handler: function() {
      this.formData[2].options = this.areaOptions
      },
      immediate: true
    }
  }
}
</script>