【小tips】vue+iview，动态计算table高度，保证页面无竖向滚动条

Connie_豆

于 2019-03-28 15:36:35 发布

阅读量3.5k

点赞数 1

分类专栏：前端 vue iView

本文链接：https://blog.youkuaiyun.com/lvdou1120101985/article/details/88869084

版权

本文介绍了如何在Vue+IView项目中动态计算table高度，确保页面无竖向滚动条。通过固定header、面包屑和页码器高度，结合动态获取工具栏和搜索区域高度，利用`this.$nextTick`确保DOM渲染完成后再计算。同时，文章提到了使用防抖函数优化窗口调整时的onresize事件触发，并在组件销毁时清理onresize事件，防止内存泄漏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、场景

这是一个常规的后台管理系统的网站界面：

（orz……怎么拉伸成这个样子……）

我个人看这种界面的时候，是非常不喜欢竖向出现滚动条的，像搜索区域、工具栏这种固定的区域我希望是不动的，只需要拖拽表格的滚动条就可以看其他数据（就像上面的截图）。

二、解决思路：

header、面包屑、页码器的高度是固定的；
工具栏和搜索区域是不固定的，因为具栏在一个操作权限都没有的时候是看不到的，搜索条件每个界面是不固定的。
this.$refs.ref.offsetHeight可以获取到元素的高度。
当界面大小改变时，有window.onresize事件可以监听，在监听事件里重新设置表格的高度即可；

综合以上四个线索，很容易的就想到了

table height = window.innerHeight - 搜索区域高度 - 固定高度（header+面包屑） - 工具栏高度;

其实！

没错！

就是这个思路！

但是有一些需要注意的地方：

mounted节点确实可以获取到dom元素了，但是并不是最终在界面上的准确布局（位置，大小ÿ

最低0.47元/天解锁文章