vue3 基于element-plus 封装form表单

SearchForm 组件

<template>
  <div class="search_form">
    <el-form
      :model="searchForm"
      :label-width="searchForm.formApi.labelWidth"
      :inline="searchForm.formApi.inline"
      style="width: 100%"
    >
      <el-form-item
        v-for="(item, index) in searchForm.formChildren"
        :key="index"
        :label="item.label"
      >
        <el-input
          v-if="item.type == 'input'"
          :style="{
            width: item.width
              ? item.width + 'px'
              : searchForm.formApi.width + 'px'
          }"
          :size="item.size ? item.size : searchForm.formApi.size"
          v-model="item.value"
          :disabled="item.disabled"
          :clearable="item.clearable"
          :filterable="item.filterable"
          :placeholder="item.placeholder ? item.placeholder : '请输入'"
        />
        <el-select
          v-else-if="item.type == 'select' || item.type == 'multiple'"
          :style="{
            width: item.width
              ? item.width + 'px'
              : searchForm.formApi.width + 'px'
          }"
          :size="item.size ? item.size : searchForm.formApi.size"
          v-model="item.value"
          :multiple="item.type == 'multiple'"
          :disabled="item.disabled"
          :clearable="item.clearable"
          :collapse-tags="item.collapseTags"
          :filterable="item.filterable"
          :placeholder="item.placeholder ? item.placeholder : '请输入'"
        >
          <el-option
            v-for="(val, ind) in item.option"
            :key="ind"
            :label="val.label"
            :value="val.value"
          />
        </el-select>
        <el-date-picker
          v-else-if="item.type == 'datePicker'"
          :style="{
            width: item.width
              ? Number(item.width - 20) + 'px'
              : Number(searchForm.formApi.width - 20) + 'px'
          }"
          :size="item.size ? item.size : searchForm.formApi.size"
          v-model="item.value"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :format="item.format ? item.format : 'YYYY/MM/DD'"
          :value-format="item.valueFormat ? item.valueFormat : 'YYYY-MM-DD'"
          :disabled="item.disabled"
          :clearable="item.clearable"
          :filterable="item.filterable"
          :placeholder="item.placeholder ? item.placeholder : '请输入'"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Query</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
// 父组件传参
let props = defineProps({
  searchForm: {
    required: true
  }
})
let { searchForm } = props

function onSubmit() {
  let formList = [...searchForm.formChildren]
  let obj: any = {}
  formList.forEach((item) => {
    obj[item.key] = item.value
  })
  console.log('obj', obj)
}
</script>

<style lang="scss"></style>

父组件

<template>
  <SearchForm :searchForm="searchForm" />
</template>

<script lang="ts" setup>
import { reactive, defineAsyncComponent } from 'vue'

// 子组件挂载
const SearchForm = defineAsyncComponent(() => import('@/components/SearchForm'))

const form = reactive({
  customerId: '',
  designRule: '',
  cdGrade: '',
  maskId: '',
  statue: '',
  updateTime: ''
})
const searchForm: any = reactive({
  formApi: {
    inline: true,
    labelWidth: '120px',
    width: '360',
    showMessage: true,
    size: 'default' //  large, default, small
  },
  formChildren: [
    {
      label: 'Customer ID',
      key: 'customerId',
      value: [],
      type: 'multiple',
      size: 'large',
      filterable: true,
      clearable: true,
      option: [
        {
          label: 'label-1',
          value: '1'
        },
        {
          label: 'label-2',
          value: '2'
        },
        {
          label: 'label-3',
          value: '3'
        },
        {
          label: 'label-4',
          value: '4'
        }
      ]
    },
    {
      label: 'Design Rule',
      key: 'designRule',
      value: '',
      type: 'input',
      size: 'default',
      clearable: true
    },
    {
      label: 'CD Grade',
      key: 'cdGrade',
      value: '',
      type: 'input',
      size: 'small',
      clearable: true
    },
    {
      label: 'Mask ID',
      key: 'maskId',
      value: '',
      type: 'input',
      width: '160',
      clearable: true
    },
    {
      label: '状态',
      key: 'status',
      value: '',
      type: 'select',
      width: '260',
      clearable: true,
      option: [
        {
          label: '已发货',
          value: '1'
        },
        {
          label: '未发货',
          value: '0'
        }
      ]
    },
    {
      label: '更新时间',
      key: 'updateTime',
      value: '',
      type: 'datePicker',
      width: '360',
      clearable: true
    }
  ]
})
</script>

<style lang="scss">
#app {
  width: 100%;
  height: 100%;
}
</style>