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