vue自适应高度，vue让某个组件的高度等于一个屏幕在其他内容下剩余的高度。vue自适应一个屏幕剩余的高度。element el-table自适应高度。保持和整个浏览器一样的高度

其实原理非常简单，就是获取屏幕的高度然后减去其他内容占用的高度就行了。

核心代码如下

<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}"

这里减去的数字需要你自己去计算，比如我这类的85就是顶部header那一块的高度，53就是上方tab菜单占用的高度，15就是设置距离上方的间距，反正这个自己去微调即可。

还有注意一点就是这个单位px的问题，有些组件比如el-table，他有height属性，如果你想要el-table自适应高度就不用加px单位了。