vue3 表单搜索组件

组件：

<template>
    <div v-if="props.formItemList.length > 0" class="dialog-search">
        <el-form ref="ruleForm" :inline="true" :model="searchMap" class="demo-form-inline" label-width="80px"
            label-position="left">
            <el-row :gutter="20">
                <el-col :span="8" v-for="(item, index) in props.formItemList" :key="index">
                    <el-form-item v-show="index < 0 || hideMap" :label="item.label">
                        <el-select v-if="item.type == 'select'" v-model="searchMap[item.param]" placeholder="请选择" clearable>
                            <el-option v-for="selectItem in item.data" :key="selectItem.value" :label="selectItem.name"
                                :value="selectItem.value" />
                        </el-select>
                        <el-input v-if="item.type == 'input'" v-model="searchMap[item.param]" :label="item.label"
                            placeholder="请输入" />

                        <el-date-picker v-if="item.type == 'year'" v-model="searchMap[item.param]" :value="item.value"
                            type="year" format="yyyy" value-format="yyyy" placeholder="请选择时间" />

                        <el-date-picker v-if="item.type == 'date'" v-model="searchMap[item.param]" :value="item.value"
                            type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="请选择时间" />

                        <el-date-picker v-if="item.type == 'datetime'" v-model="searchMap[item.param]" :value="item.value"
                            type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择时间" />

                        <el-date-picker v-if="item.type == 'month'" v-model="searchMap[item.param]" :value="item.value"
                            type="month" format="yyyy-MM" value-format="yyyy-MM" placeholder="请选择时间" />

                        <el-date-picker v-if="item.type == 'more-date'" v-model="searchMap[item.param]" :value="item.value"
                            type="dates" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择时间" />

                        <el-date-picker v-if="item.type == 'senior-date'" v-model="searchMap[item.param]"
                            :value="item.value" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :picker-options="optionsFast" placeholder="请选择时间" />

                        <el-date-picker v-if="item.type == 'daterange'" v-model="searchMap[item.param]" :value="item.value"
                            type="daterange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :range-separator="separator"
                            start-placeholder="开始时间" end-placeholder="结束时间" />



                        <el-date-picker v-if="item.type == 'datetimerange'" v-model="searchMap[item.param]"
                            :value="item.value" type="datetimerange" format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss" :range-separator="separator" start-placeholder="开始时间"
                            end-placeholder="结束时间" />

                        <el-date-picker v-if="item.type == 'monthrange'" v-model="searchMap[item.param]" :value="item.value"
                            type="monthrange" format="yyyy-MM" value-format="yyyy-MM" :range-separator="separator"
                            start-placeholder="开始时间" end-placeholder="结束时间" />

                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item v-if="props.formItemList.length > 0" class="search-buttons">
                <el-button type="primary" size="small" @click="onSubmit">
                    <i class="el-icon-search" />
                    搜索
                </el-button>

                <el-button type="" size="small" @click="resetForm">重置</el-button>

                <el-button v-show="props.formItemList.length > 4" :type="hideMap ? 'danger' : 'success'" size="small"
                    @click="showSearchMap">
                    {{ searchMapBtnText }}
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script setup>
let props = defineProps(['formItemList'])
let emit = defineEmits(['search'])
let searchMap = ref({})
let hideMap = ref(true)
let separator = ref('~')
let optionsFast = reactive({
    shortcuts: [
        {
            text: '今日',
            onClick(picker) {
                picker.$emit('pick', new Date())
            },
        },
        {
            text: '昨日',
            onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
            },
        },
        {
            text: '一星期',
            onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', date)
            },
        },
    ],
})


let searchMapBtnText = computed(() => {
    return hideMap.value ? '隐藏' : '显示'
})
onMounted(() => {
    setTimeout(function () {
        searchMap.value = initSearchMap(props.formItemList, false)
    }, 500)
})


function initSearchMap(data, isreset) {
    const initFormInline = {}
    for (const obj of data) {
        if (!isreset) {
            initFormInline[obj.param] = obj.value
        } else {
            initFormInline[obj.param] = ''
        }
    }
    return initFormInline
}
function doSearch() {
    emit('search', searchMap)
}
function onSubmit() {
    doSearch()
}
function resetForm() {
    searchMap.value = initSearchMap(props.formItemList, true)
    doSearch()
}
function showSearchMap() {
    hideMap.value = !hideMap.value
}


</script>
  
<style lang="less" scoped>
:deep(.el-input,
    .el-select,
    .el-date-editor) {
    width: 100% !important;
}

:deep(.el-form-item) {
    width: 100%;
}

.search-buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

}
</style>
  
  

 页面中使用

<template>
    <el-card>
        <Searchbar :formItemList="formItemList" />
        <el-table></el-table>
    </el-card>
</template>

<script setup>
import Searchbar from "../../../components/SearchBar.vue"
const formItemList = [
    {
        "label": "用户名",
        "param": "userNo",
        "type": "input"
    },
    {
        "label": "QQ号",
        "param": "qqAccount",
        "type": "input"
    },
    {
        "label": "时间",
        "param": "date",
        "type": "daterange"
    },

    {
        "label": "合作状态",
        "param": "status",
        "type": "select",
        data: [
            { name: '未合作', value: '1' },
            { name: '已合作', value: '0' },
        ]
    },
    {
        "label": "合作状态",
        "param": "vipLevel",
        "type": "select",
        data: [
            { name: '普通用户', value: '0' },
            { name: '普通会员', value: '1' },
            { name: '白银会员', value: '2' },
            { name: '黄金会员', value: '3' },
            { name: '钻石会员', value: '4' },
            { name: '普通代理', value: '5' },
            { name: '核心代理', value: '6' },
            { name: '伙伴代理', value: '7' },
        ]
    }
]




</script>

<style lang="less" scoped>
:deep(.el-table__cell) {
    text-align: center;
}


:deep(.el-table thead.is-group th.el-table__cell) {
    background-color: #fff !important;
}
</style>

效果：

 拿vue2版本改的，所以时间组件的格式化会有些问题，可以去element plus官方文档上面改成自己需要的时间格式