【vue】,封装的table组件，table表格超出高度自适应滚动效果，设置页面全局统一自适应高度

需求背景：为了使后台页面的 table 列表页面始终保持统一的高度，无论我们的列表数据有多少都只占一个屏幕的高度，
如果 table 表格的数据太多，只滚动table 表格的数据，页面高度保持不变；

使用 window.onresize 监听浏览器的高度：

// tableHeight: 为 el-table 绑定的 height 高度；
onMounted(() => {
// 设置表格初始高度为 innerHeight-offsetTop - 表格底部与浏览器底部距离：68 + 顶部固定高度：50
tableHeight.value = window.innerHeight - elTableRef.value.$el.offsetTop - 118;
// 监听浏览器高度变化
window.onresize = () => {
tableHeight.value =
window.innerHeight - elTableRef.value.$el.offsetTop - 118;
};
});

注意的点是：
　　1、我们 table 表格距离底部的距离 elTableRef.value.$el.offsetTop；
　　2、如果我们顶部有固定高度 (有绑定 fixed 属性)，还需要另外减去这个 fixed盒子属性的高度；

文章来源