日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

這篇文章將為大家詳細講解有關怎么在Vue中固定表頭和首列，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

創(chuàng)新互聯(lián)建站致力于網(wǎng)站制作、網(wǎng)站建設,成都網(wǎng)站設計,集團網(wǎng)站建設等服務標準化，推過標準化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務水平進行質(zhì)量交付，讓企業(yè)網(wǎng)站從市場競爭中脫穎而出。 選擇創(chuàng)新互聯(lián)建站，就選擇了安全、穩(wěn)定、美觀的網(wǎng)站建設服務！

一、創(chuàng)建多個表格進行覆蓋

思路：當頁面滾動到臨界值時，出現(xiàn)固定表頭、首列

先創(chuàng)建一個活動表格

  
    
    
    
      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}}
    
  

監(jiān)控表格位置到達窗口頂部時出現(xiàn)固定表頭

//監(jiān)控表頭位置
headerMonitor:function(){
  var self=this
  var hHeight=$("#sTable").offset().top;
  $(document).scroll(function(){
    //當滾動條達到偏移值的時候，出現(xiàn)固定表頭
    if($(this).scrollTop()>hHeight){
      self.fixedHeader=true
    }else{
      self.fixedHeader=false
    }

  })
}

當然需要調(diào)用該方法

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}}
    
  

同理監(jiān)控表格的位置

//監(jiān)控表頭、首列位置
monitor:function(){
  var self=this
  $(document).scroll(function(){
    self.setPosition()
    //當滾動條達到左偏移值的時候，出現(xiàn)固定列頭
    if($(this).scrollLeft()>self.hLeft){
      self.fixedCol=true
    }else{
      self.fixedCol=false
    }
    //當滾動條達到上偏移值的時候，出現(xiàn)固定表頭
    if($(this).scrollTop()>self.hHeight){
      self.fixedHeader=true
    }else{
      self.fixedHeader=false
    }
    //當表格移到左上角時，出現(xiàn)固定的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監(jiān)控滾動新建多個表格實現(xiàn)表頭首列固定.html

二、控制樣式實現(xiàn)固定表頭，首列

思路：當表格達到臨界值時，改變表頭，首列的樣式

首先實現(xiàn)表頭固定

  
    
    
    
      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;
}

監(jiān)控表格位置

//監(jiān)控表頭，首列位置
monitor:function(){
  this.setPosition()
  var self=this
  $(document).scroll(function(){
    self.setPosition();
    //當滾動條達到偏移值的時候，出現(xiàn)固定表頭
    if($(this).scrollTop()>self.hHeight){
      self.fixedHeader=true;
    }else{
      self.fixedHeader=false
    }
    //當滾動條達到左偏移值的時候，出現(xiàn)固定列頭
    if($(this).scrollLeft()>self.hLeft){
      self.fixedCol=true
    }else{
      self.fixedCol=false
    }
    //當表格移到左上角時，出現(xiàn)固定的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定位不占位，當固定表頭出現(xiàn)時，有一行會補到表頭位置，即有一行跳空,將tbody的第一行行高加倍*/
.fixedHeaderGap:first-child>td{
    padding-top:54px;
  }
/*因為fixed定位不占位，當固定列頭出現(xiàn)時，有一列會補到列頭位置，即有一列跳空,將tbody的第二列p設置padding*/
.fixedCol>:nth-child(2){
  padding-left: 205px;
}

當再次瀏覽器打開時該頁面時，需要監(jiān)控表格是否還達到固定表頭的臨界條件

watch:{
  //頁面初始加載時，使固定表頭與列頭的偏差與當前表格的偏移值相等
  "fixedHeader":function(){
    this.setPosition()
  },
  "fixedCol":function(){
    this.setPosition()
  },
},

改樣式實現(xiàn)固定表頭首列.html

三、Vue自定義指令實現(xiàn)滾動監(jiān)聽

當使用vue時，就很少會用到Jq這么龐大的庫，而且vue官方也不推薦操作Dom元素，因此可以自定義指令實現(xiàn)固定表頭，首列。本文用的是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}}
        
      
    
    
    
  

若想要做成自定義回調(diào)事件，可以用eval(),

directives:{
  scroll:{
    bind:function(){
      var self=this;
      //觸發(fā)滾動監(jiān)聽事件
      window.addEventListener('scroll',function(){
        //觸發(fā)滾動回調(diào)事件
        eval("self.vm."+self.expression)()
      })
    }
  }
},

關于怎么在Vue中固定表頭和首列就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

文章題目：怎么在Vue中固定表頭和首列
網(wǎng)站URL：http://www.dlmjj.cn/article/ppiiss.html