先献上核心代码:
<template>
<div class="stickyTable">
<!-- 所需要的数据自己加，我只给了实现功能部分的代码 -->
<el-table :class="{'stickyCss': stickyShow}"></el-table>
</div>
</template>
<script>
export default {
mounted(){
window.addEventListener('scroll', this.handleScroll,true);
},
beforeDestroy () {
window.removeEventListener('scroll', this.handleScroll,true)
},
data () {
return {
stickyShow: false,// 控制所有吸顶样式，当滚动事件触发表格头部超出滚动区域
}
},
methods: {
handleScroll(event) {
let t1 = document.querySelector('.stickyTable').getBoundingClientRect().top;//表格盒子离视图顶部的距离
let t2 = document.querySelector('.el_main').getBoundingClientRect().top;//所在滚动区域也是表头要定位的区域离视图顶部距离
let ft = document.querySelector('.el-table__fixed-header-wrapper')// 固定列动态计算吸顶位置（其他人的各种方法其实都是为了这一步，解决固定列吸顶问题）
let t = t2-t1
if (t >= 39) { // 判断表格头部是否超出滚动区域，超出的话就要把表格头部定位到滚动区域的顶部
ft.style.top = t+'px';
this.stickyShow = true
} else {
ft.style.top = '0px'
this.stickyShow = false
}
},
}
}
</script>
<style lang="scss" scoped>
.stickyCss {
overflow: visible; // position:sticky;父元素不能overflow:hidden或者overflow:auto属性。
::v-deep .el-table__header-wrapper { // 通常表格用这个css样式就能实现吸顶
position: sticky;
top: 0;
z-index: 9;
}
// 下面两个样式都是为了兼容固定列吸顶的样式
::v-deep .el-table__fixed {
z-index: 9;
}
// el-table__fixed-header-wrapper这个class类尤为重要它是固定列吸顶的关键部分，它的位置是相对于父级el-table__fixed的位置的，所以top值要动态计算
::v-deep .el-table__fixed-header-wrapper {
position: absolute;
z-index: 10;
}
}
</style>
