From ba09d72f51cfca267bf728dc9f270c8db8c30ff6 Mon Sep 17 00:00:00 2001
From: zhangjiaxun <732128096@qq.com>
Date: Tue, 20 Oct 2026 21:56:08 +0800
Subject: [PATCH] =?UTF-8?q?fix(sys):=20=E6=9D=83=E9=99=90=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-permission.vue | 57 ++++++++++++++++++++++++++++-----
 1 file changed, 49 insertions(+), 8 deletions(-)

diff --git a/src/view/sys/sys-permission.vue b/src/view/sys/sys-permission.vue
index dcd7c0c..cd2e024 100644
--- a/src/view/sys/sys-permission.vue
+++ b/src/view/sys/sys-permission.vue
@@ -3,7 +3,7 @@
   <div>
     <Row>
       <!-- 左侧树区域 start -->
-      <Col span="5" class="tree-spin-col" :style="{overflow: 'auto',height: '500px'}">
+      <Col span="5" ref="treeCol" class="tree-spin-col" :style="{overflow: 'auto', height: treeHeight + 'px'}">
         <div>
           <Tree ref="tree"
                 :data="treeList"
@@ -20,9 +20,9 @@
       <!-- 左侧树区域 end -->
 
       <!-- 右侧主体区域 start -->
-      <Col span="18" offset="1">
+      <Col span="18" offset="1" ref="rightCol">
         <!-- 查询区域 start -->
-        <div class="option">
+        <div class="option" ref="optionBox">
           <Input v-model="search.permissionName" 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>
@@ -30,7 +30,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 : ''"
@@ -55,7 +55,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"
@@ -148,8 +148,8 @@
     data() {
       return {
         fixedHeader: true,// 高度自适应
-        autoHeight: `${window.innerHeight} ` * 0.58,// 获取当前可视高度-定义Table高度
-        treeAutoHeight: (`${window.innerHeight} ` * 0.58 + 200),
+        autoHeight: `${window.innerHeight} ` * 0.58,// 表格高度（随容器可用高度动态修正）
+        treeHeight: `${window.innerHeight} ` * 0.58,// 左侧树高度，对齐到右侧表格底部
         treeLoading: false,//树加载中
         treeList: [],
         disabledTreeSelect: false,
@@ -257,6 +257,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();
@@ -449,7 +481,15 @@
       this.getDataList()
     },
     mounted() {
-
+      this.calcHeight()
+      window.addEventListener('resize', this.calcHeight)
+    },
+    activated() {
+      // keep-alive 缓存组件重新显示时，容器高度可能已变化，需重算
+      this.calcHeight()
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.calcHeight)
     }
   }
 </script>
@@ -461,6 +501,7 @@
 
   .tree-spin-col {
     position: relative;
+    box-sizing: border-box;
     border: 1px solid #eee;
   }