欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-22 18:59:56
...

当表头达到表格顶部的时候让给表格max-height的值,让表格不会被滚动到窗口外面去,这样翻页也能在窗口中,提升一点用户体验
使用element-ui让表格固定在当前窗口,可随窗口大小改变
背景:
使用element-ui让表格固定在当前窗口,可随窗口大小改变

			//背景:表格在一个有头部的页面里面,还有导航
   			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是留给翻页用的)= 剩余的就是表格高度
                    
                }
            })