副标题:从基础原理到el-table深度应用,手把手教你实现"屏幕无界,布局有度"的响应式方案
一、核心知识点梳理
-
响应式窗口高度监听
• 使用ref
创建响应式变量windowHeight
,通过window.addEventListener('resize')
实时更新窗口高度
• 示例代码:const windowHeight = ref(window.innerHeight); window.addEventListener('resize', () => { windowHeight.value = window.innerHeight; });
-
动态高度计算与最小值限制
• 通过computed
属性计算元素高度,结合if
条件判断设置最小高度(如360px)
• 示例代码:const tHeight = computed(() => { let h = windowHeight.value - 190; let minH = 360; return h < minH ? minH : h;