From 810e34362547ad8e45d9d0b00ddce7e60851ccd6 Mon Sep 17 00:00:00 2001
From: zhangjiaxun <732128096@qq.com>
Date: Tue, 20 Oct 2026 22:01:34 +0800
Subject: [PATCH] =?UTF-8?q?fix(sys):=20=E9=83=A8=E9=97=A8=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E6=A0=91=E5=BD=A2=E5=8C=BA=E5=9F=9F=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6=E9=9A=8F=E5=B1=8F=E5=B9=95=E8=87=AA=E9=80=82=E5=BA=94?=
 =?UTF-8?q?=E5=B9=B6=E4=B8=8E=E8=A1=A8=E6=A0=BC=E5=BA=95=E9=83=A8=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除内联与样式块中重复写死的 500px，改为按内容区可用高度动态计算
- 表格高度按「可用高度 - 查询区 - 按钮区 - 分页区」分配
- 树高度在表格重排后量取表格真实底边，保证底边严格对齐
- 监听 window resize 与 keep-alive activated 重算
---
 src/view/sys/sys-dept.vue | 57 +++++++++++++++++++++++++++++++++------
 1 file changed, 49 insertions(+), 8 deletions(-)

diff --git a/src/view/sys/sys-dept.vue b/src/view/sys/sys-dept.vue
index cb21dab..09d66eb 100644
--- a/src/view/sys/sys-dept.vue
+++ b/src/view/sys/sys-dept.vue
@@ -2,7 +2,7 @@
   <div>
     <Row>
       <!-- 左侧树区域 start -->
-      <Col span="6" class="demo-spin-col" :style="{overflow: 'auto',height: '500px'}">
+      <Col span="6" class="demo-spin-col" :style="{overflow: 'auto', height: treeHeight + 'px'}">
         <div>
           <Tree ref="tree"
                 :data="treeList"
@@ -19,9 +19,9 @@
       <!-- 左侧树区域 end -->
 
       <!-- 右侧主体区域 start -->
-      <Col span="17" offset="1">
+      <Col span="17" offset="1" ref="rightCol">
         <!-- 查询区域 start -->
-        <div class="option">
+        <div class="option" ref="optionBox">
           <Input v-model="search.deptName" class="short-input" clearable placeholder="部门名称"/>
           <Button class="free" type="primary" icon="ios-search" @click="getDataList()">查询</Button>
           <Button class="free" type="primary" icon="md-refresh" @click="refresh()">重置</Button>
@@ -29,7 +29,7 @@
         <!-- 查询区域 end -->
 
         <!-- 列表区域 start -->
-        <div class="table-button-list">
+        <div class="table-button-list" ref="btnBox">
           <Button class="free" type="info" icon="md-add" @click="toAdd">添加</Button>
         </div>
         <Table :height="fixedHeader ? autoHeight : ''"
@@ -54,7 +54,7 @@
             </Poptip>
           </template>
         </Table>
-        <div class="pagination">
+        <div class="pagination" ref="pageBox">
           <Page show-elevator show-sizer show-total
                 :total="pageTotal" :page-size="pageParam.pageSize"
                 :current="pageParam.pageNum"
@@ -129,7 +129,8 @@
     data() {
       return {
         fixedHeader: true,// 高度自适应
-        autoHeight: `${window.innerHeight} ` * 0.58,// 获取当前可视高度-定义Table高度
+        autoHeight: `${window.innerHeight} ` * 0.58,// 表格高度（随容器可用高度动态修正）
+        treeHeight: `${window.innerHeight} ` * 0.58,// 左侧树高度，对齐到右侧表格底部
         treeLoading: false,//树加载中
         treeList: [],
         disabledTreeSelect: false,
@@ -228,6 +229,38 @@
       }
     },
     methods: {
+      // 依据内容区可用高度动态分配：表格自适应，左侧树底部与表格底部严格对齐
+      calcHeight() {
+        const wrap = this.$el.closest('.content-wrapper')
+        const option = this.$refs.optionBox
+        const btn = this.$refs.btnBox
+        const page = this.$refs.pageBox
+        const table = this.$refs.table
+        if (!wrap || !option || !btn || !page || !table) {
+          return
+        }
+        const wrapStyle = window.getComputedStyle(wrap)
+        const avail = wrap.clientHeight
+          - (parseFloat(wrapStyle.paddingTop) || 0)
+          - (parseFloat(wrapStyle.paddingBottom) || 0)
+        const pageStyle = window.getComputedStyle(page)
+        const pageMarginTop = parseFloat(pageStyle.marginTop) || 0
+        const pageMarginBottom = parseFloat(pageStyle.marginBottom) || 0
+        // 除表格外的固定块：查询区 + 按钮区 + 分页区（含上下外边距）
+        const fixed = option.offsetHeight + btn.offsetHeight
+          + page.offsetHeight + pageMarginTop + pageMarginBottom
+        this.autoHeight = Math.max(200, avail - fixed)
+        // 等表格按新高度重排后再量底边，避免拿到上一帧的位置
+        this.$nextTick(() => {
+          window.requestAnimationFrame(() => {
+            const tableEl = table.$el || table
+            // 量表格真实底边：树高 = 根节点顶到表格底的距离，任何屏幕下都贴合
+            const rootTop = this.$el.getBoundingClientRect().top
+            const tableBottom = tableEl.getBoundingClientRect().bottom
+            this.treeHeight = Math.max(200, Math.round(tableBottom - rootTop))
+          })
+        })
+      },
       getTreeChoose() {
         // 获取选中的节点信息
         let choose = this.$refs.tree.getSelectedNodes();
@@ -417,7 +450,15 @@
       this.getDataList()
     },
     mounted() {
-
+      this.calcHeight()
+      window.addEventListener('resize', this.calcHeight)
+    },
+    activated() {
+      // keep-alive 缓存组件重新显示时，容器高度可能已变化，需重算
+      this.calcHeight()
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.calcHeight)
     }
   }
 </script>
@@ -428,7 +469,7 @@
   }
 
   .demo-spin-col {
-    height: 500px;
+    box-sizing: border-box;
     position: relative;
     border: 1px solid #eee;
   }