实现分页组件悬浮在页面底部

Question

项目页面中使用eletable + ele的pagination分页控件。
想实现分页控件在页面数据多、并且屏幕下的情况下，不随着页面滚动。而是悬浮在窗口底部。

现在用css实现了定位在底部，但是当数据少的时候或者屏幕大的时候 还是跟随在table的底部，而不是一直停靠在底部。

我自己的实现思路是判断底部控件与上面table的高度间隔，如果大于0的话，就改变样式。但是如何动态的取到高度间隔呢？ 或者有没有其他的实现方式呢

Answer 1

已经实现了，分享下方法。

整体思路是 :
获取窗口高度，再获取table高度。如果table的高度>(窗口高度 - 上边导航栏的高度)那说明数据超出屏幕，则将分页器绝对定位到底部，否则跟随table底部即可。

详细步骤如下：
第一步 ：document.documentElement.clientHeight 获取浏览器整体的高度。
这里要注意：我用的vue，所以在mounted中 用onresize监听窗口变化

    window.onresize = () => {
                return (() => {
                    window.fullHeight = document.documentElement.clientHeight
                    _this.fullHeight = window.fullHeight
                    _this.setPaginationStyle()
                })()
            }

第二步 ：给你的table定义一个ref属性，this.$refs.myTable.$el.clientHeight 拿到table的高度。

这里要注意下 this.$refs.myTable.$el.clientHeight拿到的高度是数据填充之前获取到的（这里坑了我小半天），所以我在vue的updated钩子函数中再次获取一次。具体方法如下：

  /**
         * 设置分页位置的方法
         */
        setPaginationStyle:function () {


            console.log('myTable',this.$refs.myTable)

            console.log('clientHeight',this.$refs.myTable.$el.offsetHeight)
            console.log('fullHeight',this.fullHeight)

            //浏览器高度小于 704 直接定位到底部
            if(this.fullHeight < 704){

                this.paginationStyle = 'background-color: white;position: fixed;bottom: 0; width: 100%; z-index: 100;'
                this.myTableStyle = 'margin-bottom:35px'
            }else {

                //table宽度小于 浏览器高度 - （面包屑 + 导航栏的高度）说明需要固定位置
                if(this.$refs.myTable.$el.clientHeight < this.fullHeight - 320 ){
                    this.paginationStyle = 'background-color: white'
                    this.myTableStyle = 'margin-bottom:0px'
                }else {
                    this.paginationStyle = 'background-color: white;position: fixed;bottom: 0; width: 100%; z-index: 100;'
                    this.myTableStyle = 'margin-bottom:35px'
                }
            }
        }



        
        

Answer 2

直接绝对定位到底部

Answer 3

对兼容性要求不高的话，我觉得可以试一下position:sticky;。