怎么在Vue中固定表头和首列

这篇文章将为大家详细讲解有关怎么在Vue中固定表头和首列，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联建站致力于网站制作、网站建设,成都网站设计,集团网站建设等服务标准化，推过标准化降低中小企业的建站的成本，并持续提升建站的定制化服务水平进行质量交付，让企业网站从市场竞争中脱颖而出。 选择创新互联建站，就选择了安全、稳定、美观的网站建设服务！

一、创建多个表格进行覆盖

思路：当页面滚动到临界值时，出现固定表头、首列

先创建一个活动表格

  
    
    
    
      th,
      td {
        min-width: 200px;
        height: 50px;
      }
      #sTable {
        margin-top: 300px
      }
      [v-cloak]{
        display: none;
      }
    
  
  
    
    
      
        
          {{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

二、控制样式实现固定表头，首列

思路：当表格达到临界值时，改变表头，首列的样式

首先实现表头固定

  
    
    
    
      th,
      td {
        min-width: 200px;
        height: 50px;
      }
      table {
        margin: 300px
      }
      .fHeader {
        background: lightblue;
        position: fixed;
        top: 0;
      }
      [v-cloak]{
        display: none;
      }
    
  
  
    
      
        
          {{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的思路其实也一样。

直接上代码

  
    
    
    
      th,
      td {
        min-width: 200px;
        height: 50px;
      }
      #sTable {
        margin: 300px
      }
      .fixedCol{
        position: fixed;
        left: 0;
        background: lightblue;
        z-index: 1;
      }
      #fHeader {
        background: lightblue;
        position: fixed;
        top: 0;
        z-index: 1;
      }
      .fixedA1{
        background: lightblue;
        position: fixed;
        top: 0;
        left: 0;
        z-index:2;
      }
      [v-cloak]{
        display: none;
      }
    
  
  
    
    
      
        
          {{item.key}}
        
      
    
    
    
      
        
          {{item.key}}
        
      
      
        
          {{list.key}}
        
      
    
    
     
      
        
          {{item.key}}
        
      
    
    
    
      
        
          {{item.key}}
        
      
      
        
          {{list.key}}
        
      
    
    
    
  

若想要做成自定义回调事件，可以用eval(),

directives:{
  scroll:{
    bind:function(){
      var self=this;
      //触发滚动监听事件
      window.addEventListener('scroll',function(){
        //触发滚动回调事件
        eval("self.vm."+self.expression)()
      })
    }
  }
},

关于怎么在Vue中固定表头和首列就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。