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

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

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

clipboard.png

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

阅读 14.2k
3 个回答

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

整体思路是 :
获取窗口高度,再获取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'
                }
            }
        }



        
        

直接绝对定位到底部

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题