<template><div><p>窗口高度：{{ windowHeight }} px</p></div>
</template><script>
export default {data() {return {// 下面的 -250 表示减去一些表单元素高度 这个值需要自己手动调整windowHeight: document.documentElement.clientHeight - 250, // 初始化窗口高度};},methods: {updateWindowHeight() {// 更新窗口高度this.windowHeight = document.documentElement.clientHeight;console.log("窗口高度变化为:", this.windowHeight);},},mounted() {// 组件挂载后添加事件监听器window.addEventListener("resize", this.updateWindowHeight);},beforeDestroy() {// 组件销毁前移除事件监听器window.removeEventListener("resize", this.updateWindowHeight);},
};
</script><style scoped>
/* 添加样式 */
</style>
如果你不考虑 屏幕缩放的自动调整高度 那就可以用下面的
<el-table:data="tableData"tooltip-effect="dark"style="width: 100%":max-height="tableHeight"borderstripe:header-cell-style="{background: '#f1f3f5',color: '#000000'}"></el-table>computed: {tableHeight () {// 下面的 - 262 表示减去一些表单元素高度 这个值需要自己手动调整return document.documentElement.clientHeight - 262}},
)
