使用element-ui让表格固定在当前窗口,可随窗口大小改变

当表头达到表格顶部的时候让给表格max-height的值,让表格不会被滚动到窗口外面去,这样翻页也能在窗口中,提升一点用户体验
在这里插入图片描述
背景:
在这里插入图片描述

			//背景:表格在一个有头部的页面里面,还有导航
   			console.log($('.a').outerHeight());     //头部高度
            console.log($('.b').outerHeight())		//导航高度
            console.log($(window).height());		//窗口高度
            
            window.addEventListener('scroll', () => {        //通过滚动事件监听滚动条高度,在mounted里面
                if(document.documentElement.scrollTop >= 313) {		//313: 这是我自己滑动滚动条后看到表格头部刚好接触导航条   
                //当然这里还有可以用一个简单点的
                //if($('.el-table').offset().top - document.documentElement.scrollTop <=0)  这样就不用每次自己去算了
                    this.max_tableHeight = $(window).height() -($('a').outerHeight() + $('.b').outerHeight() + 50)
                    //然后就是将窗口高度-头部-导航-50(这里的50是留给翻页用的)= 剩余的就是表格高度
                    
                }
            })  

猜你喜欢

转载自blog.csdn.net/weixin_43565820/article/details/90603549