Element-plus封装搜索组件

<template>
    <div>
        <el-form ref="searchRef" :size="props.size" :model="searchVal" :label-width="props.labelWidth">
            <el-row :gutter="20">       
                <el-col :xs="24" :sm="12" :md="12" :lg="props.span" v-for="(item, index) in props.option" :key="index" class="mb20">
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="props.span">         
                    <el-form-item>            
                        <el-button type="primary" @click="search">搜索</el-button>          
                        <el-button @click="reset(searchRef)">重置</el-button>          
                    </el-form-item>       
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script lang='ts' setup>
    import {
    onMounted, reactive, ref } from 'vue'
    import type {
    ElForm } from 'element-plus'
    import {
    ElMessage } from 'element-plus'
    import {
    formatDate } from '@/utils/formatTime'
    import type {
    Option } from '@/components/type.d.ts'

    type FormInstance = InstanceType<typeof ElForm>
        const searchRef = ref<FormInstance>()
    // 搜索值
    let searchVal: any = reactive({
   })
    // 搜索
    const search = () => {
   
        for (let i in searchVal) {
   
            if (searchVal[i] === undefined || searchVal[i] === '') {
   
                delete searchVal[i]
            }
        }
        emit('search', searchVal)
    }
    // 重置
    const reset = (formEl: FormInstance | undefined) => {
   
        if (!formEl) return
        formEl.resetFields()
        emit('search', searchVal)
    }
    interface Props {
   
        labelWidth?: number | string
        size?: 'small' | 'default' | 'large'
        span?: number
        option: Option[]
        defaultValue?: any
    }
    const props = withDefaults(defineProps<Props>(), {
   
        size: 'default',
        span: 8,
        labelWidth: 100
    })
</script>

//选择框的option类型
interface SelectOption {
   
  label: string
  value: any
}
//选择框和文本输入框的option类型
interface InputOptions {
   
  prop: string
  option: SelectOption[]
}

export interface Option {
   
  label: string //标签名称
  prop: string //表单项字段名
  endProp?: string //日期范围的结束日期字段名
  placeholder?: string //输入框占位文本
  type?: 'input' | 'select' | 'cascader' | 'date' | 'datetime' | 'daterange' | 'inputSelect' //表单项类型
  optionLabel?: string //选择框的label字段
  optionValue?: string //选择框的value字段
  option?: any[] //选择框option
  inputOptions?: InputOptions //选择框和文本输入框的option
  max?: number //级联选择器的最大选择数量
  children?: string //级联选择器children字段名
  multiple?: boolean //级联选择器是否多选
  value?: string //级联选择器返回值字段名
  itemLabel?: string //级联选择器选项名称
  checkStrictly?: boolean //是否可选择父节点和子节点
  emitPath?: boolean // 是否返回由该节点所在的各级菜单的值所组成的数组
  show?: boolean //是否显示选中值的完整路径
  filterable?: boolean //选择框是否可搜索
}

<template>
    <div>
        <el-form ref="searchRef" :size="props.size" :model="searchVal" :label-width="props.labelWidth">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="12" :md="12" :lg="props.span" v-for="(item, index) in props.option" :key="index" class="mb20">
                    <el-form-item v-if="item.type == 'input' || !item.type" @keyup.enter="search" :prop="item.prop" :label="item.label">
                        <el-input v-model="searchVal[item.prop]" :placeholder="item.placeholder"></el-input>
                    </el-form-item>
                    <el-form-item v-