修改 时间组件问题

src/components/table/header/index.vue

@@ -2,8 +2,8 @@
     <div ref="tableHeader" class="cn-table-header">
         <div class="table-header ba-scroll-style">
             <el-form
-                style="flex: 1; height: 32px; overflow: hidden; margin-right: 20px"
-                id="header-form"
+                style="flex: 1; height: 32px; margin-right: 20px"
+                ref="headerForm"
                 @submit.prevent=""
                 @keyup.enter="onComSearch"
                 label-position="left"
@@ -22,27 +22,19 @@
                     <Icon size="14" name="el-icon-ArrowUp" style="color: #fff" v-if="showSelect" />
                     <Icon size="14" name="el-icon-ArrowDown" style="color: #fff" v-else />
                 </el-button>
-                <el-button @click="onComSearch" type="primary" :icon="Search">查询</el-button>
-                <el-button @click="onResetForm" :icon="RefreshLeft">重置</el-button>
+                <el-button @click="onComSearch" v-if="showSearch" type="primary" :icon="Search">查询</el-button>
+                <el-button @click="onResetForm" v-if="showSearch" :icon="RefreshLeft">重置</el-button>
             </template>
             <slot name="operation"></slot>
         </div>
         <el-form
             :style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
-            id="header-form-second"
+            ref="headerFormSecond"
             @submit.prevent=""
             @keyup.enter="onComSearch"
             label-position="left"
             :inline="true"
-        >
-            <el-form-item label="区域" v-if="area">
-                <Area ref="areaRef" v-model="tableStore.table.params.deptIndex" />
-            </el-form-item>
-            <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
-                <DatePicker ref="datePickerRef"></DatePicker>
-            </el-form-item>
-            <slot name="select"></slot>
-        </el-form>
+        ></el-form>
     </div>
 </template>
 
@@ -60,15 +52,19 @@ const tableHeader = ref()
 const datePickerRef = ref()
 const dictData = useDictData()
 const areaRef = ref()
+const headerForm = ref()
+const headerFormSecond = ref()
 
 interface Props {
     datePicker?: boolean
     area?: boolean
+    showSearch?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
     datePicker: false,
-    area: false
+    area: false,
+    showSearch: true
 })
 // 动态计算table高度
 const resizeObserver = new ResizeObserver(entries => {
@@ -114,33 +110,30 @@ const handlerHeight = () => {
     ).height as string
 }
 const computedSearchRow = () => {
-    const headerForm = document.getElementById('header-form') as HTMLElement
-    const headerFormSecond = document.getElementById('header-form-second') as HTMLElement
-    if (!headerForm) return
-    // 判断是否需要折叠
-    if (headerForm.scrollHeight > 50) {
-        showUnfoldButton.value = true
-    } else {
-        showUnfoldButton.value = false
-    }
+    if (!headerForm.value.$el) return
 
-    // 清空headerFormSecond下的元素
-    while (headerFormSecond.firstChild) {
-        headerFormSecond.removeChild(headerFormSecond.firstChild)
+    // 清空headerFormSecond.value.$el下的元素
+    while (headerFormSecond.value.$el.firstChild) {
+        headerForm.value.$el.appendChild(headerFormSecond.value.$el.firstChild)
     }
 
     // 获取第一行放了几个表单
-    const elFormItem = document.querySelectorAll('#header-form .el-form-item') as NodeListOf<HTMLElement>
-
-    //  把第一行放不下的复制一份放到headerFormSecond
+    const elFormItem = headerForm.value.$el.querySelectorAll('.el-form-item')
+    //  把第一行放不下的复制一份放到headerFormSecond.value.$el
     let width = 0
     for (let i = 0; i < elFormItem.length; i++) {
         width += elFormItem[i].offsetWidth + 32
-        if (width > headerForm.offsetWidth) {
-            const clonedForm = elFormItem[i].cloneNode(true)
-            headerFormSecond.appendChild(clonedForm)
+        if (width > headerForm.value.$el.offsetWidth) {
+            headerFormSecond.value.$el.appendChild(elFormItem[i])
         }
     }
+
+    // 判断是否需要折叠
+    if (headerFormSecond.value.$el.scrollHeight > 0) {
+        showUnfoldButton.value = true
+    } else {
+        showUnfoldButton.value = false
+    }
 }
 
 const showSelect = ref(false)
@@ -161,10 +154,20 @@ const onComSearch = async () => {
 const onResetForm = () => {
     tableStore.onTableAction('reset', {})
 }
-defineExpose({ onComSearch, areaRef })
+const setDatePicker = (list: any) => {
+    datePickerRef.value.setTimeOptions(list)
+}
+const setInterval = (val: any) => {
+    datePickerRef.value.setInterval(val)
+}
+
+defineExpose({ onComSearch, areaRef, setDatePicker, setInterval, datePickerRef })
 </script>
 
 <style scoped lang="scss">
+.cn-table-header {
+    border: 1px solid var(--el-border-color);
+}
 .table-header {
     position: relative;
     overflow-x: auto;
@@ -174,7 +177,7 @@ defineExpose({ onComSearch, areaRef })
     width: 100%;
     max-width: 100%;
     background-color: var(--ba-bg-color-overlay);
-    border: 1px solid var(--el-border-color);
+
     border-bottom: none;
     padding: 13px 15px;
     font-size: 14px;