admin-govern/src/components/table/header/index.vue

<template>
    <!-- 通用搜索 -->
    <transition name="el-zoom-in-bottom" mode="out-in">
        <div class="table-com-search" v-if="isShowSelect">
            <el-form @submit.prevent="" @keyup.enter="onComSearch" label-position="left" :inline="true">
                <slot name="select"></slot>
                <el-form-item>
                    <el-button  @click="onComSearch" type="primary">查询</el-button>
                    <el-button @click="onResetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </transition>

    <div class="table-header ba-scroll-style">
        <slot name="operation"></slot>
        <!-- 右侧搜索框和工具按钮 -->
        <div class="table-search">
            <div class="table-search-button-group">
                    <el-button class="table-search-button-item" color="#dcdfe6" plain @click="showSelect">
                        <Icon size="14" name="el-icon-Search" />
                    </el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { inject,ref } from 'vue'
import type TableStore from '@/utils/tableStore'

const tableStore = inject('tableStore') as TableStore
const isShowSelect = ref(false)
const showSelect = () => {
    isShowSelect.value = !isShowSelect.value
}
const onComSearch = () => {}
const onResetForm = () => {}
</script>

<style scoped lang="scss">
.table-header {
    position: relative;
    overflow-x: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    background-color: var(--ba-bg-color-overlay);
    border: 1px solid var(--ba-border-color);
    border-bottom: none;
    padding: 13px 15px;
    font-size: 14px;
    .table-header-operate-text {
        margin-left: 6px;
    }
}

.table-com-search {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background-color: var(--ba-bg-color-overlay);
    border: 1px solid var(--ba-border-color);
    border-bottom: none;
    padding: 13px 15px 0 15px;
    font-size: 14px;
    .com-search-col {
        display: flex;
        align-items: center;
        padding-top: 8px;
        color: var(--el-text-color-regular);
        font-size: 13px;
    }
    .com-search-col-label {
        width: 33.33%;
        padding: 0 15px;
        text-align: right;
        overflow: hidden;
        white-space: nowrap;
    }
    .com-search-col-input {
        padding: 0 15px;
        width: 66.66%;
    }
    .com-search-col-input-range {
        display: flex;
        align-items: center;
        padding: 0 15px;
        width: 66.66%;
        .range-separator {
            padding: 0 5px;
        }
    }
}
.mlr-12 {
    margin-left: 12px;
}
.mlr-12 + .el-button {
    margin-left: 12px;
}
.table-search {
    display: flex;
    margin-left: auto;
    .quick-search {
        width: auto;
    }
}
.table-search-button-group {
    display: flex;
    margin-left: 12px;
    border: 1px solid var(--el-border-color);
    border-radius: var(--el-border-radius-base);
    overflow: hidden;
    button:focus,
    button:active {
        background-color: var(--ba-bg-color-overlay);
    }
    button:hover {
        background-color: var(--el-color-info-light-7);
    }
    .table-search-button-item {
        height: 30px;
        border: none;
        border-radius: 0;
    }
    .el-button + .el-button {
        margin: 0;
    }
    .right-border {
        border-right: 1px solid var(--el-border-color);
    }
}

html.dark {
    .table-search-button-group {
        button:focus,
        button:active {
            background-color: var(--el-color-info-dark-2);
        }
        button:hover {
            background-color: var(--el-color-info-light-7);
        }
        button {
            background-color: var(--ba-bg-color-overlay);
            el-icon {
                color: white !important;
            }
        }
    }
}
</style>