El-table实现自动吸顶效果（支持fixed）

2024-02-18 11:16:16


<script>
function fixedTableHeader() {
  var table = document.getElementById("table");
  var header = table.querySelector("thead");
  var headerHeight = header.offsetHeight;
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  if (scrollTop > headerHeight) {
    header.classList.add("fixed");
  } else {
    header.classList.remove("fixed");
  }
}
window.addEventListener("scroll", fixedTableHeader);
</script>

在el-table中实现自动吸顶效果，是一种常见的需求。当el-table的表头需要固定在页面顶部时，吸顶效果可以帮助用户更轻松地查看表中的数据。

实现el-table自动吸顶效果的方法有很多，但本文将介绍一种简单易懂的方法，该方法使用js监听滚动的思路实现，即使设置了fixed，也能实现吸顶效果。

首先，我们需要在el-table的表头添加一个class，如“fixed-header”。然后，在js代码中，我们可以使用addEventListener方法监听页面的滚动事件。当页面滚动时，我们可以通过判断scrollTop的值来判断表头是否需要固定。如果scrollTop的值大于表头的高度，则表示表头需要固定，此时我们可以给表头添加“fixed-header”class；否则，我们需要移除“fixed-header”class。

function fixedTableHeader() {
  var table = document.getElementById("table");
  var header = table.querySelector("thead");
  var headerHeight = header.offsetHeight;
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  if (scrollTop > headerHeight) {
    header.classList.add("fixed-header");
  } else {
    header.classList.remove("fixed-header");
  }
}
window.addEventListener("scroll", fixedTableHeader);