使用element-ui让表格固定在当前窗口,可随窗口大小改变
程序员文章站
2022-05-22 18:59:56
...
当表头达到表格顶部的时候让给表格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是留给翻页用的)= 剩余的就是表格高度
}
})
上一篇: 刘彻十几岁登基,打仗打了近大半辈子