首先需要在mounted里面创一个滚轮事件
mounted() {
window.addEventListener("scroll", this.handleScroll, true);
},
然后定义这个事件
handleScroll() {let scrollTop = window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop; //滑动的距离
let heightTop = document.querySelector("#searchBar").offsetTop;
if (scrollTop >= heightTop) {
//表头到达页面顶部固定表头
let top = scrollTop - (heightTop + 80);
document.getElementsByClassName(
"el-table__header-wrapper"
)[0].style.position = "relative";
document.getElementsByClassName(
"el-table__header-wrapper"
)[0].style.zIndex = "500";
document.getElementsByClassName(
"el-table__header-wrapper"
)[0].style.top = `${top}px`;
} else if (scrollTop == 0) {
//表格横向
// console.log('横拉')
document.getElementsByClassName(
"el-table__header-wrapper"
)[0].style.position = "relative";
document.getElementsByClassName(
"el-table__header-wrapper"
)[0].style.zIndex = "500";
} else {
document.getElementsByClassName(
"el-table__header-wrapper"
)[0].style.position = "";
document.getElementsByClassName(
"el-table__header-wrapper"
)[0].style.top = "";
document.getElementsByClassName(
"el-table__header-wrapper"
)[0].style.zIndex = "";
}
},
记得在el-table里面加id="searchBar"