vue自适应高度，vue让某个组件的高度等于一个屏幕在其他内容下剩余的高度。vue自适应一个屏幕剩余的高度。element el-table自适应高度 电脑版发表于：2024/11/15 11:47 其实原理非常简单，就是获取屏幕的高度然后减去其他内容占用的高度就行了。 ### 核心代码如下 ``` <script setup lang="ts"> import {reactive, onMounted, toRefs, ref } from 'vue'; const state = reactive({ contentHeight:"350px", }); onMounted(() => { autoHeight() // 让f12全屏的时候或者退出全屏的时候可以让高度跟着自适应变化 window.addEventListener('resize', autoHeight); }); const autoHeight = ()=>{ // 动态调整高度 state.contentHeight = window.innerHeight-(53+15+85)+"px" } </script> ``` 上面代码的contentHeight就是动态获取的高度，直接绑定到你需要的动态获取的组件上去就行了： ``` :style="{height:state.contentHeight}" ``` tn2>这里减去的数字需要你自己去计算，比如我这类的85就是顶部header那一块的高度，53就是上方tab菜单占用的高度，15就是设置距离上方的间距，反正这个自己去微调即可。 tn4>还有注意一点就是这个单位px的问题，有些组件比如el-table，他有height属性，如果你想要el-table自适应高度就不用加px单位了。
