Vue多種方法實現表頭和首列固定的示例代碼

更新時間：2018年02月02日 09:24:55 作者：ClydeKuo

本篇文章主要介紹了Vue多種方法實現表頭和首列固定的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

有時表格太大，滾動時信息查看不方便，需要對表格進行全局表頭、首列固定，

上效果：

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      th,
      td {
        min-width: 200px;
        height: 50px;
      }
      #sTable {
        margin-top: 300px
      }
      [v-cloak]{
        display: none;
      }
    </style>
  </head>
  <body v-cloak>
    <!--活動的表格-->
    <table id="sTable" border="1" cellspacing="0">
      <thead>
        <tr>
          <th v-for="item in th">{{item.key}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tl">
          <td v-for="list in item">{{list.key}}</td>
        </tr>
      </tbody>
    </table>
    <script src="vue.js"></script>
    <script src="jquery.js"></script>
    <script>
      var vm = new Vue({
        el: "body",
        data: function() {
          return {
            th: [],
            tl: [],
            temp: [],
          }
        },
        methods: {
          //生成表格
          CTable: function() {
            for(var i = 0; i < 10; i++) {
              this.th.push({
                key: "head" + i
              })
            }
            for(var i = 0; i < 100; i++) {
              for(var j = 0; j < 10; j++) {
                this.temp.push({
                  key: j + "body" + i
                })
              }
              this.tl.push(this.temp)
              this.temp = []
            }
          },
        },
        ready: function() {
          this.CTable();
        },
      })
    </script>
  </body>
</html>

再添加固定表頭：

#fHeader {
  background: lightblue;
  position: fixed;
  top: 0;
}

<!--固定表頭-->
<table border="1" id="fHeader" cellspacing="0" v-show="fixedHeader"> 
  <thead>
    <tr >
      <th v-for="item in th">{{item.key}}</th>
    </tr>
  </thead>
</table>

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

//監(jiān)控表頭位置
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;
  }

<!--固定A1-->
<table border="1" cellspacing="0" class="fixedA1" v-show="fixedA1">
  <thead>
    <tr>
      <th v-for="item in th" v-if="$index==0">{{item.key}}</th>
    </tr>
  </thead>
</table>
<!--固定首列-->
<table border="1" cellspacing="0" class="fixedCol" v-show="fixedCol">
  <thead>
    <tr>
      <th v-for="item in th" v-if="$index==0">{{item.key}}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in tl">
      <td v-for="list in item" v-if="$index==0">{{list.key}}</td>
    </tr>
  </tbody>
</table >

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

//監(jiān)控表頭、首列位置
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監(jiān)控滾動新建多個表格實現表頭首列固定.html

二、控制樣式實現固定表頭，首列

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

首先實現表頭固定

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      th,
      td {
        min-width: 200px;
        height: 50px;
      }
      table {
        margin: 300px
      }
      .fHeader {
        background: lightblue;
        position: fixed;
        top: 0;
      }
      [v-cloak]{
        display: none;
      }
    </style>
  </head>
  <body v-cloak>
    <table border="1" cellspacing="0">
      <thead>
        <tr :class="{fHeader:fixedHeader}">
          <th v-for="item in th">{{item.key}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tl">
          <td v-for="list in item">{{list.key}}</td>

        </tr>
      </tbody>
    </table>
    <script src="vue.js"></script>
    <script src="jquery.js"></script>
    <script>
      var vm = new Vue({
        el: "body",
        data: function() {
          return {
            th: [],
            tl: [],
            temp: [],
            fixedHeader: false,
          }
        },
        methods: {
          //生成表格，代碼相同，省略
          CTable: function() {},
          //監(jiān)控表頭位置
          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>
  </body>
</html>

添加固定首列

.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();
    //當滾動條達到偏移值的時候，出現固定表頭
    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<len;i++){
    //因為設置了“border-collapse:collapse”，所以要加“54-1”
    $(".fixedCol>: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;
}

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

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

改樣式實現固定表頭首列.html

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

當使用vue時，就很少會用到Jq這么龐大的庫，而且vue官方也不推薦操作Dom元素，因此可以自定義指令實現固定表頭，首列。本文用的是Vue.js v1.0.26，但V2.0的思路其實也一樣。

直接上代碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      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;
      }
    </style>
  </head>
  <body v-cloak>
    <!--固定A1-->
    <table border="1" cellspacing="0" class="fixedA1" v-show="fixedA1">
      <thead>
        <tr>
          <th v-for="item in th" v-if="$index==0">{{item.key}}</th>
        </tr>
      </thead>
    </table>
    <!--固定列頭-->
    <table border="1" cellspacing="0" class="fixedCol" v-show="fixedCol">
      <thead>
        <tr>
          <th v-for="item in th" v-if="$index==0">{{item.key}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tl">
          <td v-for="list in item" v-if="$index==0">{{list.key}}</td>
        </tr>
      </tbody>
    </table >
    <!--固定表頭-->
    <table border="1" id="fHeader" cellspacing="0" v-show="fixedHeader"> 
      <thead>
        <tr >
          <th v-for="item in th">{{item.key}}</th>
        </tr>
      </thead>
    </table>
    <!--活動的表格,綁定自定義指令-->
    <table id="sTable" border="1" cellspacing="0" v-scroll>
      <thead>
        <tr>
          <th v-for="item in th">{{item.key}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tl">
          <td v-for="list in item">{{list.key}}</td>
        </tr>
      </tbody>
    </table>
    <script src="vue.js"></script>
    <script>
      var vm = new Vue({
        el: "body",
        data: function() {
          return {
            th: [],
            tl: [],
            temp: [],
            fixedCol: false,
            fixedHeader:false,
            fixedA1:false,
            hLeft:0,
            hHeight:0,
          }
        },
        directives:{
          scroll:{
            bind:function(){
              //觸發(fā)滾動監(jiān)聽事件
              window.addEventListener('scroll',function(){
                this.vm.monitor()
              })
            }
          }
        },
        methods: {
          //生成表格
          CTable: function() {},
          //監(jiān)控表頭、列頭位置
          monitor:function(){
            this.setPosition();
            //當滾動條達到左偏移值的時候，出現固定列頭
            if(document.body.scrollLeft>this.hLeft){
              this.fixedCol=true;
            }else{
              this.fixedCol=false;
            }
            //當滾動條達到上偏移值的時候，出現固定表頭
            if(document.body.scrollTop>this.hHeight){
              this.fixedHeader=true;
            }else{
              this.fixedHeader=false;
            }
            //當表格移到左上角時，出現固定的A1表格
            if(document.body.scrollLeft>this.hLeft&&document.body.scrollTop>this.hHeight){
              this.fixedA1=true;
            }else{
              this.fixedA1=false;
            }
          },
          //使固定表頭與列頭的偏差與當前表格的偏移值相等
          setPosition:function(){
            document.getElementById("fHeader").style.left=this.hLeft-document.body.scrollLeft+"px";
            document.getElementsByClassName("fixedCol")[0].style.top=this.hHeight-document.body.scrollTop+"px";
          },
        },
        ready: function() {
          this.CTable();
          this.hLeft=document.getElementById("sTable").offsetLeft;
          this.hHeight=document.getElementById("sTable").offsetTop
          this.monitor()
        },
      })
    </script>
  </body>
</html>

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

<table id="sTable" border="1" cellspacing="0" v-scroll="monitor">

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

自定義回調指令固定表列頭.html

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

ElementUI多個子組件表單的校驗管理實現
這篇文章主要介紹了ElementUI多個子組件表單實現方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11
詳解如何在Electron中存取本地文件
在Electron 中,存取本地文件,有很多種辦法,本文介紹最常用的一種辦法, 通過 Electron 框架提供的能力,和 Node.js 的 fs 文件管理模塊實現本地文件的存取,需要的小伙伴可以參考下
2023-11-11
Vue組件間通信 Vuex的用法解析
這篇文章主要介紹了Vue組件間通信-Vuex,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-08-08
同步cookie插件原理及實現示例
這篇文章主要為大家介紹了同步cookie插件原理及實現示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10
vue封裝實現自動循環(huán)滾動的列表
在做數據大屏開發(fā)的過程中,經常出現需要對列表進行自動滾動的需求,所以本文就來為大家介紹一下如何利用vue封裝一個自動循環(huán)滾動的列表吧
2023-09-09
Vue中mixins的使用方法以及實際項目應用指南
vue中提供了一種混合機制--mixins,用來更高效的實現組件內容的復用,下面這篇文章主要給大家介紹了關于Vue中mixins的使用方法以及實際項目應用指南,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-03-03
詳解Vue中Computed與watch的用法與區(qū)別
這篇文章主要介紹了Vue中computed和watch的使用與區(qū)別，文中通過示例為大家進行了詳細講解，對Vue感興趣的同學，可以學習一下
2022-04-04
vue3.0中的watch偵聽器實例詳解
雖然計算屬性在大多數情況下更合適,但有時也需要一個自定義的偵聽器,這就是為什么Vue通過watch選項提供了一個更通用的方法,來響應數據的變化,這篇文章主要給大家介紹了關于vue3.0中watch偵聽器的相關資料,需要的朋友可以參考下
2021-10-10
Vue中el-menu-item實現路由跳轉的完整步驟
這篇文章主要給大家介紹了關于Vue中el-menu-item實現路由跳轉的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2022-09-09
Vue-router優(yōu)化import引入過多導致index文件臃腫問題
這篇文章主要為大家介紹了Vue-router優(yōu)化import引入過多導致index文件臃腫問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-08-08