前面我发了一篇表头吸顶功能的文章，通过js计算性能消耗较高比较复杂，下面这个方法纯利用css的定位功能实现，比较简单方便。
<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) {
if (!event.target.scrollLeft) {
let t1 = document.querySelector('.stickyTable').getBoundingClientRect().top;//表格盒子离视图顶部的距离
let t2 = document.querySelector('.el_main').getBoundingClientRect().top;//所在滚动区域也是表头要定位的区域离视图顶部距离
let t = t2-t1
if (t >= 39) { // 这里可以设置合适的值，当你滑动到一定位置时出现吸顶的样式效果
this.stickyShow = true
} else {
this.stickyShow = false
}
}
},
}
}
</script>
<style lang="scss" scoped>
.stickyCss {
overflow: visible;
::v-deep .el-table__header-wrapper {
position: sticky;
top: 0;
z-index: 9;
}
::v-deep .el-table__footer-wrapper {
position: sticky;
top: 40px;
z-index: 9;
}
::v-deep .el-table__fixed {
overflow: visible;
.el-table__fixed-body-wrapper {
width: 100%;
overflow: hidden;
}
.el-table__fixed-header-wrapper {
position: sticky;
top: 0;
z-index: 10;
width: 100%;
overflow: hidden;
}
.el-table__fixed-footer-wrapper {
position: sticky;
top: 40px;
z-index: 10;
width: 100%;
overflow: hidden;
}
}
}
</style>
核心思想就是滚动条滑动到一定程度时，通过定位table表格的表头或者表尾合计行的位置来实现吸顶功能
至于想要符合你的需求的样式都可以审查处理，我已经亲测过没有任何问题
