布局修改

src/components/table/header/index.vue

@@ -1,42 +1,42 @@
 <template>
-    <div ref="tableHeader" class="cn-table-header">
+    <div ref='tableHeader' class='cn-table-header'>
         <!-- 通用搜索 -->
-        <transition name="el-zoom-in-bottom" mode="out-in">
-            <div id="table-com-search1" class="table-com-search" v-show="showSelect">
+        <transition name='el-zoom-in-bottom' mode='out-in'>
+            <div id='table-com-search1' class='table-com-search' v-show='showSelect'>
             </div>
         </transition>
-        <div class="table-header ba-scroll-style">
-            <div id="table-com-search2" style="flex: 1; height: 32px; overflow: hidden; margin-right: 20px">
+        <div class='table-header ba-scroll-style'>
+            <div id='table-com-search2' style='flex: 1; height: 32px; overflow: hidden; margin-right: 20px'>
                 <el-form
-                    id="header-form"
-                    @submit.prevent=""
-                    @keyup.enter="onComSearch"
-                    label-position="left"
-                    :inline="true"
-                    class="table-com-search-form"
-                    :label-width="90"
+                    id='header-form'
+                    @submit.prevent=''
+                    @keyup.enter='onComSearch'
+                    label-position='left'
+                    :inline='true'
+                    class='table-com-search-form'
+                    :label-width='90'
                 >
-                    <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
-                        <DatePicker ref="Picker"></DatePicker>
+                    <el-form-item label='日期' v-if='datePicker' style='grid-column: span 2; max-width: unset'>
+                        <DatePicker ref='Picker'></DatePicker>
                     </el-form-item>
-                    <slot name="select"></slot>
+                    <slot name='select'></slot>
                 </el-form>
             </div>
-            <template v-if="$slots.select">
-                <el-button @click="onComSearch" type="primary">查询</el-button>
-                <el-button @click="onResetForm">重置</el-button>
-                <div class="table-search-button-group" v-if="showUnfoldButton">
-                    <el-button class="table-search-button-item" color="#dcdfe6" plain @click="showSelectChange">
-                        <Icon size="14" name="el-icon-Search" />
+            <template v-if='$slots.select'>
+                <el-button @click='onComSearch' type='primary'>查询</el-button>
+                <el-button @click='onResetForm'>重置</el-button>
+                <div class='table-search-button-group' v-if='showUnfoldButton'>
+                    <el-button class='table-search-button-item' color='#dcdfe6' plain @click='showSelectChange'>
+                        <Icon size='14' name='el-icon-Search' />
                     </el-button>
                 </div>
             </template>
-            <slot name="operation"></slot>
+            <slot name='operation'></slot>
         </div>
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import { inject, ref, onMounted, nextTick, onUnmounted } from 'vue'
 import type TableStore from '@/utils/tableStore'
 import DatePicker from '@/components/form/datePicker/index.vue'
@@ -96,7 +96,7 @@ const showSelectChange = () => {
     if (showSelect.value) {
         const dom1 = document.getElementById('table-com-search1') as HTMLElement
         dom1.appendChild(dom)
-    }else{
+    } else {
         const dom2 = document.getElementById('table-com-search2') as HTMLElement
         dom2.appendChild(dom)
     }
@@ -117,7 +117,7 @@ const dateChange = () => {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang='scss'>
 .table-header {
     position: relative;
     overflow-x: auto;
@@ -147,16 +147,18 @@ const dateChange = () => {
     padding: 13px 15px 20px 15px;
     font-size: 14px;
 }
-.table-com-search-form,
-.table-com-search-form2 {
+
+.table-com-search-form{
     display: grid;
     grid-gap: 20px;
     grid-template-columns: repeat(5, 1fr);
+
     :deep(.el-select),
     :deep(.el-cascader),
     :deep(.el-input) {
         width: 100%;
     }
+
     :deep(.el-form-item) {
         max-width: 600px;
         margin-right: 0;
@@ -164,23 +166,41 @@ const dateChange = () => {
     }
 }
 
-@media screen and (max-width: 2600px) {
+@media screen and (max-width: 2650px) {
+    .table-com-search-form {
+        grid-template-columns: repeat(6, 1fr);
+    }
+}
+
+@media screen and (max-width: 2300px) {
+    .table-com-search-form {
+        grid-template-columns: repeat(5, 1fr);
+    }
+}
+
+@media screen and (max-width: 1950px) {
     .table-com-search-form {
         grid-template-columns: repeat(4, 1fr);
     }
 }
-@media screen and (max-width: 2000px) {
+
+@media screen and (max-width: 1600px) {
     .table-com-search-form {
         grid-template-columns: repeat(3, 1fr);
     }
 }
-@media screen and (max-width: 1500px) {
+
+@media screen and (max-width: 1300px) {
     .table-com-search-form {
         grid-template-columns: repeat(2, 1fr);
     }
 }
-.table-header .table-com-search-form2 {
-    grid-template-columns: repeat(auto-fit, 400px);
+
+#table-com-search2 {
+    .table-com-search-form {
+        display: flex;
+        flex-wrap: wrap;
+    }
 }
 
 .mlr-12 {