vue3+element-ui--plus，form查询组件封装

1.组件代码

<template>
  <div class="form-search">
    <div v-if="formItem && formItem.length > 0" class="search-table-header">
      <div>
        <el-form :inline="true" :model="form" label-width="120px" label-position="right">
          <el-row>
            <el-col v-for="(item, index) in formItem" :key="index" :span="item.width">
              <el-form-item
                :key="index"
                :label="item.label"
                :prop="item.value"
                style="width:100%"
              >
                <!-- 下拉 -->
                <el-select
                  v-if="item.type === 'select'"
                  v-model="form[item.value]"
                  clearable
                >
                  <el-option
                    v-for="(option,i) in item.children"
                    :key="i"
                    :value="option.value"
                    :label="option.label"
                  />
                </el-select>
                <!--文本-->
                <el-input
                  v-if="item.type === 'text'"
                  v-model="form[item.value]"
                  clearable
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <div class="button-list">
              <el-button @click="emit('searchForm', form)">查询</el-button>
              <el-button @click="clearData">重置</el-button>
            </div>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup>
import {  getCurrentInstance, ref, reactive} from 'vue'
const { proxy } = getCurrentInstance()
defineProps({
  formItem: { // form查询项
    type: Array,
    default: () => []
  },
  formData: { // form查询数据
    type: Object,
    default: () => {}
  }
})
const emit = defineEmits(['searchForm', 'clearForm'])

let form = reactive(JSON.parse(JSON.stringify(proxy.formData)))  // form查询数据

const clearData = () => { // 清空搜索栏
  Object.keys(form).map(key => { form[key] = '' })
  emit('clearForm')
}
</script>

<style scope lang="less">
.form-search{
  .el-select{
    width:100%;
  }
  .button-list{
    margin-left: 120px;
  }
}
</style>

2.组件使用

  <FormSearch :form-item="formItem" :form-data="formData" @searchForm="getList" @clearForm="clearForm" />

import FormSearch from '@/components/Form/FormSearch.vue'


const formItem = [
  {
    label: '姓名',
    value: 'name',
    width: 6,
    type: 'text'
  },
  {
    label: '年龄',
    value: 'age',
    width: 6,
    type: 'text'
  },
  {
    label: '年级',
    value: 'classes',
    width: 6,
    type: 'select',
    children: [
      {
        label: '一年级',
        value: '1'
      },
      {
        label: '二年级',
        value: '2'
      },
      {
        label: '三年级',
        value: '3'
      },
      {
        label: '四年级',
        value: '4'
      },
      {
        label: '五年级',
        value: '5'
      },
      {
        label: '六年级',
        value: '6'
      }
    ]
  }
]
const formData = reactive({name: '', age: '', classes: ''})

const getList = val => {
  console.log('查询数据', val)
}

const clearForm = () => {
  console.log('清除数据')
}

完整代码链接：

1.windmoon/vite-vue3-temptale

2.https://github.com/jimoruyan/vite-vue3-template