表格优化

src/components/table/header/index.vue

@@ -1,44 +1,57 @@
 <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>
+    <transition name='el-zoom-in-bottom' mode='out-in' v-if='$slots.select'>
+        <div class='table-com-search' v-if='showSelect'>
+            <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-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-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 class='table-search' v-if='$slots.select'>
+            <div class='table-search-button-group'>
+                <el-button class='table-search-button-item' color='#dcdfe6' plain @click='showSelectChange'>
+                    <Icon size='14' name='el-icon-Search' />
+                </el-button>
             </div>
         </div>
     </div>
 </template>
 
-<script setup lang="ts">
-import { inject,ref } from 'vue'
+<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
+
+interface Props {
+    // 默认展开
+    showSelect?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    showSelect: false
+})
+const showSelect = ref(props.showSelect)
+const showSelectChange = () => {
+    showSelect.value = !showSelect.value
+}
+const onComSearch = () => {
+    tableStore.onTableAction('search', {})
+}
+const onResetForm = () => {
+    tableStore.onTableAction('reset', {})
 }
-const onComSearch = () => {}
-const onResetForm = () => {}
 </script>
 
-<style scoped lang="scss">
+<style scoped lang='scss'>
 .table-header {
     position: relative;
     overflow-x: auto;
@@ -52,6 +65,7 @@ const onResetForm = () => {}
     border-bottom: none;
     padding: 13px 15px;
     font-size: 14px;
+
     .table-header-operate-text {
         margin-left: 6px;
     }
@@ -66,6 +80,7 @@ const onResetForm = () => {}
     border-bottom: none;
     padding: 13px 15px 0 15px;
     font-size: 14px;
+
     .com-search-col {
         display: flex;
         align-items: center;
@@ -73,6 +88,7 @@ const onResetForm = () => {}
         color: var(--el-text-color-regular);
         font-size: 13px;
     }
+
     .com-search-col-label {
         width: 33.33%;
         padding: 0 15px;
@@ -80,54 +96,67 @@ const onResetForm = () => {}
         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);
     }
@@ -139,11 +168,14 @@ html.dark {
         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;
             }