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

一、场景

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

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

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

 

二、解决思路：

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

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

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

其实！

没错！</