table第一列水平固定，垂直可滚动

最新推荐文章于 2023-12-15 15:24:46 发布

原创最新推荐文章于 2023-12-15 15:24:46 发布 · 4.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #滚动事件

vue 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何在Vue中实现表格第一列水平固定，同时保持垂直滚动功能。通过固定定位和监听滚动事件，调整表格第一列的位置。在动态生成的表格中，需额外处理表格生成后的错位问题。

table第一列水平固定，垂直可滚动

既然有固定的话首先需要想到给table的第一列加上固定定位

#divTable >>> table tr td:nth-child(1) {position: fixed;}

但是此时table的第一列无论上下、左右滑动都是固定不动的，明显与需求不符，所以我们还需要执行以下代码

接下来我们要在methods里面添加一个方法方便调用

methods:{
    handleScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        console.log(scrollTop)
          $("#divTable table tr td:nth-child(1)").css("position","absolute")
      },
}

再者我们需要监听一下这个滚动事件

window.addEventListener('scroll', this.handleScroll)

上述代码的意思是监听了table距离浏览器顶部的距离，换言之如果页面发生上下滚动事件的时候，就会把table的固定定位换位绝对定位。

有了以上逻辑处理方案这个功能就得以实现了。

注：此时需要注意一点！！！

如果table是动态生成的话！还需要添加

if($('#divTable').offset().top > 0){
    setTimeout(function () {
      $("#divTable table tr td:nth-child(1)").css("position","absolute")
    },50);
 }

就是说如果这个table还未生成的情况下，页面向下滚动距离后，待table生成后第一列会有错位的现象发生，则需要加上上面这段代码