项目页面中使用eletable + ele的pagination分页控件。
想实现分页控件在页面数据多、并且屏幕下的情况下,不随着页面滚动。而是悬浮在窗口底部。
现在用css实现了定位在底部,但是当数据少的时候或者屏幕大的时候 还是跟随在table的底部,而不是一直停靠在底部。
我自己的实现思路是判断底部控件与上面table的高度间隔,如果大于0的话,就改变样式。但是如何动态的取到高度间隔呢? 或者有没有其他的实现方式呢
项目页面中使用eletable + ele的pagination分页控件。
想实现分页控件在页面数据多、并且屏幕下的情况下,不随着页面滚动。而是悬浮在窗口底部。
现在用css实现了定位在底部,但是当数据少的时候或者屏幕大的时候 还是跟随在table的底部,而不是一直停靠在底部。
我自己的实现思路是判断底部控件与上面table的高度间隔,如果大于0的话,就改变样式。但是如何动态的取到高度间隔呢? 或者有没有其他的实现方式呢
13 回答13k 阅读
7 回答2.2k 阅读
9 回答1.7k 阅读✓ 已解决
6 回答1.6k 阅读
3 回答1.3k 阅读✓ 已解决
5 回答1.4k 阅读✓ 已解决
3 回答1.4k 阅读✓ 已解决
已经实现了,分享下方法。
整体思路是 :
获取窗口高度,再获取table高度。如果table的高度>(窗口高度 - 上边导航栏的高度)那说明数据超出屏幕,则将分页器绝对定位到底部,否则跟随table底部即可。
详细步骤如下:
第一步 :document.documentElement.clientHeight 获取浏览器整体的高度。
这里要注意:我用的vue,所以在mounted中 用onresize监听窗口变化
第二步 :给你的table定义一个ref属性,this.$refs.myTable.$el.clientHeight 拿到table的高度。
这里要注意下 this.$refs.myTable.$el.clientHeight拿到的高度是数据填充之前获取到的(这里坑了我小半天),所以我在vue的updated钩子函数中再次获取一次。具体方法如下: