526互联

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

发布时间 2023-12-29 18:28:42作者: bug开发施
需求背景：为了使后台页面的 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盒子属性的高度；