el-table表头吸顶实现详情(适用于表头无fixed属性使用)
1、设置 ref=“tableSort”
<el-table
ref="tableSort"
v-loading="listLoading"
:data="list"
border
@selection-change="setSelectRows"
@sort-change="sortChange"
>
2、设置页面滚动条
mounted() { //添加监听滚动条事件
window.addEventListener('scroll', this.handleScroll, true)
},
destroyed() { //移除(跳转页面后移除)
window.removeEventListener('scroll', this.handleScroll, true)
},
3、获取el-table 表头css添加position属性
handleScroll(e) {
let scrollTop = e.target.scrollTop //滑动的距离
let heightTop = this.$refs['tableSort'].$parent.$parent.$el.offsetTop //距离顶部高度
if (scrollTop >= heightTop) { //表头到达页面顶部固定表头
// console.log('固定')
let top = scrollTop - (heightTop + 52)
$('.el-table__header-wrapper')[0].style.position = 'relative'
$('.el-table__header-wrapper')[0].style.zIndex = '500'
$('.el-table__header-wrapper')[0].style.top = `${top}px`
} else if (scrollTop == 0) {//表格横向
// console.log('横拉')
$('.el-table__header-wrapper')[0].style.position = 'relative'
$('.el-table__header-wrapper')[0].style.zIndex = '500'
} else {
$('.el-table__header-wrapper')[0].style.position = ''
$('.el-table__header-wrapper')[0].style.top = ''
$('.el-table__header-wrapper')[0].style.zIndex = ''
}
},
效果显示:
横拉:
参考文章:https://blog.csdn.net/qq_36940740/article/details/108140934