大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章将为大家详细讲解有关怎么在Vue中固定表头和首列,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
创新互联建站致力于网站制作、网站建设,成都网站设计,集团网站建设等服务标准化,推过标准化降低中小企业的建站的成本,并持续提升建站的定制化服务水平进行质量交付,让企业网站从市场竞争中脱颖而出。 选择创新互联建站,就选择了安全、稳定、美观的网站建设服务!
一、创建多个表格进行覆盖
思路:当页面滚动到临界值时,出现固定表头、首列
先创建一个活动表格
{{item.key}} |
---|
{{list.key}} |
再添加固定表头:
#fHeader { background: lightblue; position: fixed; top: 0; }
{{item.key}} |
---|
监控表格位置到达窗口顶部时出现固定表头
//监控表头位置 headerMonitor:function(){ var self=this var hHeight=$("#sTable").offset().top; $(document).scroll(function(){ //当滚动条达到偏移值的时候,出现固定表头 if($(this).scrollTop()>hHeight){ self.fixedHeader=true }else{ self.fixedHeader=false } }) }
当然需要调用该方法
ready: function() { this.CTable(); this.headerMonitor() },
然后添加固定首列以及固定的A1单元格
#fHeader { background: lightblue; position: fixed; top: 0; z-index: 1; } .fixedA1{ background: lightblue; position: fixed; top: 0; left: 0; z-index:2; }
{{item.key}} |
---|
{{item.key}} |
---|
{{list.key}} |
同理监控表格的位置
//监控表头、首列位置 monitor:function(){ var self=this $(document).scroll(function(){ self.setPosition() //当滚动条达到左偏移值的时候,出现固定列头 if($(this).scrollLeft()>self.hLeft){ self.fixedCol=true }else{ self.fixedCol=false } //当滚动条达到上偏移值的时候,出现固定表头 if($(this).scrollTop()>self.hHeight){ self.fixedHeader=true }else{ self.fixedHeader=false } //当表格移到左上角时,出现固定的A1表格 if($(this).scrollLeft()>self.hLeft&&$(this).scrollTop()>self.hHeight){ self.fixedA1=true }else{ self.fixedA1=false } }) },
因为表格的移动会影响表头的位置的定位位置,因此需要将当前表格的偏移值赋给固定表头。首列
setPosition:function(){ $("#fHeader").css("left",this.hLeft-$(document).scrollLeft()) $(".fixedCol").css("top",this.hHeight-$(document).scrollTop()) }
Jq监控滚动新建多个表格实现表头首列固定.html
二、控制样式实现固定表头,首列
思路:当表格达到临界值时,改变表头,首列的样式
首先实现表头固定
{{item.key}} |
---|
{{list.key}} |
添加固定首列
.fixedCol>:first-child{ background: lightblue; position: fixed; z-index: 1; border:1px solid grey; left: 0; line-height: 50px; }
监控表格位置
//监控表头,首列位置 monitor:function(){ this.setPosition() var self=this $(document).scroll(function(){ self.setPosition(); //当滚动条达到偏移值的时候,出现固定表头 if($(this).scrollTop()>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 } }) },
设置偏移值
//使固定表头与列头的偏差与当前表格的偏移值相等 setPosition:function(){ $(".fixedHeader").css("left",this.hLeft-$(document).scrollLeft()) for(var i=0,len=this.tl.length+1;i:first-child").eq(i).css("top",this.hHeight-$(document).scrollTop()+53*i) } }
因为当表头变成fixed定位时会脱离文档流,表格的第二行会被隐藏,所以需要多第二列进行宽高的拓展
/*因为fixed定位不占位,当固定表头出现时,有一行会补到表头位置,即有一行跳空,将tbody的第一行行高加倍*/ .fixedHeaderGap:first-child>td{ padding-top:54px; } /*因为fixed定位不占位,当固定列头出现时,有一列会补到列头位置,即有一列跳空,将tbody的第二列p设置padding*/ .fixedCol>:nth-child(2){ padding-left: 205px; }
当再次浏览器打开时该页面时,需要监控表格是否还达到固定表头的临界条件
watch:{ //页面初始加载时,使固定表头与列头的偏差与当前表格的偏移值相等 "fixedHeader":function(){ this.setPosition() }, "fixedCol":function(){ this.setPosition() }, },
改样式实现固定表头首列.html
三、Vue自定义指令实现滚动监听
当使用vue时,就很少会用到Jq这么庞大的库,而且vue官方也不推荐操作Dom元素,因此可以自定义指令实现固定表头,首列。本文用的是Vue.js v1.0.26,但V2.0的思路其实也一样。
直接上代码
{{item.key}} |
---|
{{item.key}} |
---|
{{list.key}} |
{{item.key}} |
---|
{{item.key}} |
---|
{{list.key}} |
若想要做成自定义回调事件,可以用eval(),