前端之家收集整理的这篇文章主要介绍了
Vue多种方法实现表头和首列固定的示例代码，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
有时表格太大，滚动时信息查看不方便，需要对表格进行全局表头、首列固定，
上效果：
一、创建多个表格进行覆盖
思路：当页面滚动到临界值时，出现固定表头、首列
先创建一个活动表格
<
Meta charset="UTF-8">
</tr>
</tbody>
</table>
<script src="vue.js"></script>
<script src="jquery.js"></script>
<script>
var vm = new Vue({
el: "body",fixedHeader: false,methods: {
//生成表格，代码相同，省略
CTable: function() {},//监控表头位置
headerMonitor:function(){
var self=this
var hHeight=$("table").offset().top;
$(document).scroll(function(){
//当滚动条达到偏移值的时候，出现固定表头
if($(this).scrollTop()>hHeight){
self.fixedHeader=true
}else{
self.fixedHeader=false
}
})
}
},ready: function() {
this.CTable();
this.headerMonitor()
},})
</script>
添加固定首列
:first-child{
background: lightblue;
position: fixed;
z-index: 1;
border:1px solid grey;
left: 0;
line-height: 50px;
}
监控表格位置
self.hHeight){
self.fixedHeader=true;
}else{
self.fixedHeader=false
}
//当滚动条达到左偏移值的时候，出现固定列头
if($(this).scrollLeft()>self.hLeft){
self.fixedCol=true
}else{
self.fixedCol=false
}
//当表格移到左上角时，出现固定的A1表格
if($(this).scrollLeft()>self.hLeft&&$(this).scrollTop()>self.hHeight){
self.fixedA1=true
}else{
self.fixedA1=false
}
})
},
设置偏移值
:first-child").eq(i).css("top",this.hHeight-$(document).scrollTop()+53*i)
}
}
因为当表头变成fixed定位时会脱离文档流，表格的第二行会被隐藏，所以需要多第二列进行宽高的拓展
td{
padding-top:54px;
}
/*因为fixed定位不占位，当固定列头出现时，有一列会补到列头位置，即有一列跳空,将tbody的第二列p设置padding*/
.fixedCol>:nth-child(2){
padding-left: 205px;
}
当再次浏览器打开时该页面时，需要监控表格是否还达到固定表头的临界条件
三、Vue自定义指令实现滚动监听
当使用vue时，就很少会用到Jq这么庞大的库，而且vue官方也不推荐操作Dom元素，因此可以自定义指令实现固定表头，首列。本文用的是Vue.js v1.0.26，但V2.0的思路其实也一样。
直接上代码
|
