动态table高度

src/components/table/header/index.vue

@@ -1,48 +1,54 @@
 <template>
-    <!-- 通用搜索 -->
-    <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 label='日期' v-if='datePicker'>
-                    <DatePicker v-model='date' @change='dateChange'></DatePicker>
-                </el-form-item>
-                <el-form-item>
-                    <el-button @click='onComSearch' type='primary'>查询</el-button>
-                    <el-button @click='onResetForm'>重置</el-button>
-                </el-form-item>
-            </el-form>
-        </div>
-    </transition>
+    <div ref="tableHeader">
+        <!-- 通用搜索 -->
+        <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 label="日期" v-if="datePicker">
+                        <DatePicker v-model="date" @change="dateChange"></DatePicker>
+                    </el-form-item>
+                    <el-form-item>
+                        <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' v-if='showOperation'>
-        <slot name='operation'></slot>
-        <!-- 右侧搜索框和工具按钮 -->
-        <div class='table-search' >
-        <slot name='right'></slot>
-            <div class='table-search-button-group' v-if='$slots.select'>
-                <el-button class='table-search-button-item' color='#dcdfe6' plain @click='showSelectChange'>
-                    <Icon size='14' name='el-icon-Search' />
-                </el-button>
+        <div class="table-header ba-scroll-style" v-if="showOperation">
+            <slot name="operation"></slot>
+            <!-- 右侧搜索框和工具按钮 -->
+            <div class="table-search">
+                <slot name="right"></slot>
+                <div class="table-search-button-group" v-if="$slots.select">
+                    <el-button class="table-search-button-item" color="#dcdfe6" plain @click="showSelectChange">
+                        <Icon size="14" name="el-icon-Search" />
+                    </el-button>
+                </div>
             </div>
         </div>
     </div>
 </template>
 
-<script setup lang='ts'>
-import { inject, ref } from 'vue'
+<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'
+import { mainHeight } from '@/utils/layout'
 
 const tableStore = inject('tableStore') as TableStore
-const date = ref([window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd'), window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd')])
+const tableHeader = ref()
+const date = ref([
+    window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd'),
+    window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd')
+])
 
 interface Props {
     // 默认展开
     showSelect?: boolean
     showOperation?: boolean // 是否显示operation
     datePicker?: boolean
-
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -54,9 +60,30 @@ if (props.datePicker) {
     tableStore.table.params.searchBeginTime = date.value[0]
     tableStore.table.params.searchEndTime = date.value[1]
 }
+// 动态计算table高度
+const resizeObserver = new ResizeObserver(entries => {
+    for (const entry of entries) {
+        handlerHeight()
+    }
+})
+onMounted(() => {
+    resizeObserver.observe(tableHeader.value)
+})
+onUnmounted(() => {
+    resizeObserver.disconnect()
+})
+
+const handlerHeight = () => {
+    tableStore.table.height = mainHeight(
+        tableStore.table.publicHeight + tableHeader.value.offsetHeight + (tableStore.showPage ? 58 : 0) + 20
+    ).height as string
+}
 const showSelect = ref(props.showSelect)
 const showSelectChange = () => {
     showSelect.value = !showSelect.value
+    nextTick(() => {
+        handlerHeight()
+    })
 }
 const onComSearch = () => {
     tableStore.onTableAction('search', {})
@@ -70,7 +97,7 @@ const dateChange = () => {
 }
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="scss">
 .table-header {
     position: relative;
     overflow-x: auto;