headerdom操作

src/components/table/header/index.vue

@@ -2,8 +2,13 @@
     <div ref="tableHeader" class="cn-table-header">
         <!-- 通用搜索 -->
         <transition name="el-zoom-in-bottom" mode="out-in">
-            <div class="table-com-search" v-show="showSelect">
+            <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">
                 <el-form
+                    id="header-form"
                     @submit.prevent=""
                     @keyup.enter="onComSearch"
                     label-position="left"
@@ -11,31 +16,10 @@
                     class="table-com-search-form"
                     :label-width="90"
                 >
-                    <el-form-item label="日期" v-if="datePicker">
+                    <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
-                        <DatePicker fef="Picker"></DatePicker>
-                    </el-form-item>
-                    <slot name="select"></slot>
-                </el-form>
-            </div>
-        </transition>
-        <div class="table-header ba-scroll-style">
-            <div style="flex: 1; height: 32px; overflow: hidden">
-                <el-form
-                    v-show="!showSelect"
-                    id="header-form"
-                    @submit.prevent=""
-                    @keyup.enter="onComSearch"
-                    label-position="left"
-                    :inline="true"
-                    class="table-com-search-form2"
-                    :label-width="100"
-                >
-                   
-                    <slot name="select"></slot>
-                    
-                    <el-form-item label="日期" v-if="datePicker">
                         <DatePicker ref="Picker"></DatePicker>
                     </el-form-item>
+                    <slot name="select"></slot>
                 </el-form>
             </div>
             <template v-if="$slots.select">
@@ -89,8 +73,7 @@ onMounted(() => {
     tableStore.table.params.searchEndTime = Picker.value.timeValue[1]
     nextTick(() => {
         resizeObserver.observe(tableHeader.value)
-        const dom = document.getElementById('header-form')
+        const dom = document.getElementById('header-form') as HTMLElement
-        console.log(dom.offsetHeight, '123123')
         if (dom.offsetHeight > 50) {
             showUnfoldButton.value = true
         }
@@ -108,9 +91,15 @@ const handlerHeight = () => {
 const showSelect = ref(false)
 const showSelectChange = () => {
     showSelect.value = !showSelect.value
-    nextTick(() => {
+    // 把dom(id=header-form)插入到table-com-search1或者table-com-search2
-        handlerHeight()
+    const dom = document.getElementById('header-form') as HTMLElement
-    })
+    if (showSelect.value) {
+        const dom1 = document.getElementById('table-com-search1') as HTMLElement
+        dom1.appendChild(dom)
+    }else{
+        const dom2 = document.getElementById('table-com-search2') as HTMLElement
+        dom2.appendChild(dom)
+    }
 }
 const onComSearch = async () => {
     console.log('时间1233123')
@@ -190,7 +179,7 @@ const dateChange = () => {
         grid-template-columns: repeat(2, 1fr);
     }
 }
-.table-com-search-form2 {
+.table-header .table-com-search-form2 {
     grid-template-columns: repeat(auto-fit, 400px);
 }