Vue3自适应布局实战：动态窗口高度适配与最小值限制的完美结合

副标题：从基础原理到el-table深度应用，手把手教你实现"屏幕无界，布局有度"的响应式方案

---

一、核心知识点梳理

1. 响应式窗口高度监听
   • 使用ref创建响应式变量windowHeight，通过window.addEventListener('resize')实时更新窗口高度
   • 示例代码：

   const windowHeight = ref(window.innerHeight);  
   window.addEventListener('resize', () => {
        
          
     windowHeight.value = window.innerHeight;  
   });  
   

2. 动态高度计算与最小值限制
   • 通过computed属性计算元素高度，结合if条件判断设置最小高度（如360px）
   • 示例代码：

   const tHeight = computed(() => {
        
          
     let h = windowHeight.value - 190;  
     let minH = 360;  
     return h < minH ? minH : h;  
   }