Elemnt ui 组件封装(form)

<template>
  <el-form
    class="form"
    :inline="formConfig.inline"
    :model="value"
    :label-width="formConfig.labelWidth"
    :rules="rules"
    :size='formConfig.size'
  >
    <slot name="formItem" />
    <el-form-item
      v-for="(item,index) in formConfig.formItemList"
      :key="index"
      :label="item.label"
      :prop="item.prop"
      :width="formConfig.width"
    >
      <el-input
        v-if="item.type=='input'"
        v-model="value[item.prop]"
        :disabled="item.disabled"
        :clearable="true"
        :placeholder="item.placeholder"
      ></el-input>
      <el-select
        :clearable="true"
        v-else-if="item.type=='select'"
        v-model="value[item.prop]"
        :disabled="item.disabled"
        :placeholder="item.placeholder"
      >
        <el-option
          v-for="(optItem,index) in item.optList"
          :key="index"
          :label="optItem.label"
          :value="optItem.value"
        ></el-option>
      </el-select>
      <el-date-picker
        :value-format="item.dateFormate"
        v-else
        v-model="value[item.prop]"
        :type="item.type"
        :disabled="item.disabled"
        :clearable="true"
        :placeholder="item.label"
      ></el-date-picker>
    </el-form-item>
    <div class="searchBtn">
      <el-button-group>
        <el-button
        class="btn"
          v-for="(item, index) in formConfig.operate"
          :key="index"
          :size="item.size"
          :type="item.type"
          :icon="item.icon"
          @click="item.handleClick(value)"
        >{{item.name}}
        </el-button>
      </el-button-group>
      <slot name="operate"></slot>
    </div>
  </el-form>
</template>
<script>
export default {
  components: {},
  props: {
    formConfig: {
      type: Object,
      required: true
    },
    value: {
      type: Object,
      required: true
    },
    rules: {
      type: Object
    }
  },
  computed: {},
  methods: {
    setDefaultValue() {
      const formData = { ...this.value };
      // 设置默认值
      this.formConfig.formItemList.forEach(({ key, value }) => {
        if (formData[key] === undefined || formData[key] === null) {
          formData[key] = value;
        }
      });
    }
  },
  mounted() {
    this.setDefaultValue();
  }
};
</script>

<style lang="scss" scoped>
  .form {
    min-width: 300px;
  }

  .searchBtn {
    .btn {
      margin-left: 20px;
    }
  }
</style>

formConfig配置

formConfig: {
        inline: true,
        size: "normal",
        labelWidth: '100',
        width: '180',
        formItemList: [
          {label: '商品名称',prop: 'name',type: 'input', placeholder: '请输入商品名称'},
          {label: '进价',prop: 'incode',type: 'input', placeholder: '请输入进价'},
          {label: '售价',prop: 'expend',type: 'input', placeholder: '请输入售价'},
          {label: '库存数量',prop: 'number',type: 'input', placeholder: '请输入库存数量'},
          {label: '商品描述',prop: 'remark',type: 'input', placeholder: '请输入商品描述'},
          {label: '供应商',prop: 'resource',type: 'input', placeholder: '请输入供应商'}
        ],
        operate: [
          {type: 'primary',icon: '',name: '取消',size: 'normal',handleClick: function() {}},
          {type: 'primary',icon: '',name: '确定',size: 'normal',handleClick: (form) => {
            this.handleSubmit(form);
          }},
        ]
      }