【vue】,封装的table组件,table表格超出高度自适应滚动效果,设置页面全局统一自适应高度
需求背景:为了使后台页面的 table 列表页面始终保持统一的高度,无论我们的列表数据有多少都只占一个屏幕的高度,
如果 table 表格的数据太多,只滚动table 表格的数据,页面高度保持不变;
使用 window.onresize 监听浏览器的高度:
如果 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盒子属性的高度;