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

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生成后第一列会有错位的现象发生，则需要加上上面这段代码