tableheader的bug修复

src/components/table/header/index.vue

@@ -3,7 +3,7 @@
         <div class="table-header ba-scroll-style">
             <el-form
                 style="flex: 1; height: 32px; overflow: hidden; margin-right: 20px"
-                id="header-form"
+                ref="headerForm"
                 @submit.prevent=""
                 @keyup.enter="onComSearch"
                 label-position="left"
@@ -29,7 +29,7 @@
         </div>
         <el-form
             :style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
-            id="header-form-second"
+            ref="headerFormSecond"
             @submit.prevent=""
             @keyup.enter="onComSearch"
             label-position="left"
@@ -52,6 +52,8 @@ const tableHeader = ref()
 const datePickerRef = ref()
 const dictData = useDictData()
 const areaRef = ref()
+const headerForm = ref()
+const headerFormSecond = ref()
 
 interface Props {
     datePicker?: boolean
@@ -108,33 +110,34 @@ 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.value.$el) return
+    console.log(headerForm.value.$el)
+
+    
+    // 清空headerFormSecond.value.$el下的元素
+    while (headerFormSecond.value.$el.firstChild) {
+        headerForm.value.$el.appendChild(headerFormSecond.value.$el.firstChild)
+    }
+
+    // 获取第一行放了几个表单
+    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.value.$el.offsetWidth) {
+            headerFormSecond.value.$el.appendChild(elFormItem[i])
+        }
+    }
+
     // 判断是否需要折叠
-    if (headerForm.scrollHeight > 50) {
+    if (headerFormSecond.value.$el.scrollHeight > 0) {
         showUnfoldButton.value = true
     } else {
         showUnfoldButton.value = false
     }
 
-    // 清空headerFormSecond下的元素
-    while (headerFormSecond.firstChild) {
-        headerFormSecond.removeChild(headerFormSecond.firstChild)
-    }
-
-    // 获取第一行放了几个表单
-    const elFormItem = document.querySelectorAll('#header-form .el-form-item') as NodeListOf<HTMLElement>
-
-    //  把第一行放不下的复制一份放到headerFormSecond
-    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)
-        }
-    }
 }
 
 const showSelect = ref(false)