【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盒子属性的高度;

posted @ 2023-12-29 18:24  八阿哥_小冷  阅读(464)  评论(0编辑  收藏  举报