您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)怎么在Vue中固定表頭和首列,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
一、創(chuàng)建多個(gè)表格進(jìn)行覆蓋
思路:當(dāng)頁面滾動到臨界值時(shí),出現(xiàn)固定表頭、首列
先創(chuàng)建一個(gè)活動表格
<!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)控表格位置到達(dá)窗口頂部時(shí)出現(xiàn)固定表頭
//監(jiān)控表頭位置 headerMonitor:function(){ var self=this var hHeight=$("#sTable").offset().top; $(document).scroll(function(){ //當(dāng)滾動條達(dá)到偏移值的時(shí)候,出現(xiàn)固定表頭 if($(this).scrollTop()>hHeight){ self.fixedHeader=true }else{ self.fixedHeader=false } }) }
當(dāng)然需要調(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; }
<!--固定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() //當(dāng)滾動條達(dá)到左偏移值的時(shí)候,出現(xiàn)固定列頭 if($(this).scrollLeft()>self.hLeft){ self.fixedCol=true }else{ self.fixedCol=false } //當(dāng)滾動條達(dá)到上偏移值的時(shí)候,出現(xiàn)固定表頭 if($(this).scrollTop()>self.hHeight){ self.fixedHeader=true }else{ self.fixedHeader=false } //當(dāng)表格移到左上角時(shí),出現(xiàn)固定的A1表格 if($(this).scrollLeft()>self.hLeft&&$(this).scrollTop()>self.hHeight){ self.fixedA1=true }else{ self.fixedA1=false } }) },
因?yàn)楸砀竦囊苿訒绊懕眍^的位置的定位位置,因此需要將當(dāng)前表格的偏移值賦給固定表頭。首列
setPosition:function(){ $("#fHeader").css("left",this.hLeft-$(document).scrollLeft()) $(".fixedCol").css("top",this.hHeight-$(document).scrollTop()) }
Jq監(jiān)控滾動新建多個(gè)表格實(shí)現(xiàn)表頭首列固定.html
二、控制樣式實(shí)現(xiàn)固定表頭,首列
思路:當(dāng)表格達(dá)到臨界值時(shí),改變表頭,首列的樣式
首先實(shí)現(xiàn)表頭固定
<!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(){ //當(dāng)滾動條達(dá)到偏移值的時(shí)候,出現(xiàn)固定表頭 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(); //當(dāng)滾動條達(dá)到偏移值的時(shí)候,出現(xiàn)固定表頭 if($(this).scrollTop()>self.hHeight){ self.fixedHeader=true; }else{ self.fixedHeader=false } //當(dāng)滾動條達(dá)到左偏移值的時(shí)候,出現(xiàn)固定列頭 if($(this).scrollLeft()>self.hLeft){ self.fixedCol=true }else{ self.fixedCol=false } //當(dāng)表格移到左上角時(shí),出現(xiàn)固定的A1表格 if($(this).scrollLeft()>self.hLeft&&$(this).scrollTop()>self.hHeight){ self.fixedA1=true }else{ self.fixedA1=false } }) },
設(shè)置偏移值
//使固定表頭與列頭的偏差與當(dāng)前表格的偏移值相等 setPosition:function(){ $(".fixedHeader").css("left",this.hLeft-$(document).scrollLeft()) for(var i=0,len=this.tl.length+1;i<len;i++){ //因?yàn)樵O(shè)置了“border-collapse:collapse”,所以要加“54-1” $(".fixedCol>:first-child").eq(i).css("top",this.hHeight-$(document).scrollTop()+53*i) } }
因?yàn)楫?dāng)表頭變成fixed定位時(shí)會脫離文檔流,表格的第二行會被隱藏,所以需要多第二列進(jìn)行寬高的拓展
/*因?yàn)閒ixed定位不占位,當(dāng)固定表頭出現(xiàn)時(shí),有一行會補(bǔ)到表頭位置,即有一行跳空,將tbody的第一行行高加倍*/ .fixedHeaderGap:first-child>td{ padding-top:54px; } /*因?yàn)閒ixed定位不占位,當(dāng)固定列頭出現(xiàn)時(shí),有一列會補(bǔ)到列頭位置,即有一列跳空,將tbody的第二列p設(shè)置padding*/ .fixedCol>:nth-child(2){ padding-left: 205px; }
當(dāng)再次瀏覽器打開時(shí)該頁面時(shí),需要監(jiān)控表格是否還達(dá)到固定表頭的臨界條件
watch:{ //頁面初始加載時(shí),使固定表頭與列頭的偏差與當(dāng)前表格的偏移值相等 "fixedHeader":function(){ this.setPosition() }, "fixedCol":function(){ this.setPosition() }, },
改樣式實(shí)現(xiàn)固定表頭首列.html
三、Vue自定義指令實(shí)現(xiàn)滾動監(jiān)聽
當(dāng)使用vue時(shí),就很少會用到Jq這么龐大的庫,而且vue官方也不推薦操作Dom元素,因此可以自定義指令實(shí)現(xiàn)固定表頭,首列。本文用的是Vue.js v1.0.26,但V2.0的思路其實(shí)也一樣。
直接上代碼
<!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(); //當(dāng)滾動條達(dá)到左偏移值的時(shí)候,出現(xiàn)固定列頭 if(document.body.scrollLeft>this.hLeft){ this.fixedCol=true; }else{ this.fixedCol=false; } //當(dāng)滾動條達(dá)到上偏移值的時(shí)候,出現(xiàn)固定表頭 if(document.body.scrollTop>this.hHeight){ this.fixedHeader=true; }else{ this.fixedHeader=false; } //當(dāng)表格移到左上角時(shí),出現(xiàn)固定的A1表格 if(document.body.scrollLeft>this.hLeft&&document.body.scrollTop>this.hHeight){ this.fixedA1=true; }else{ this.fixedA1=false; } }, //使固定表頭與列頭的偏差與當(dāng)前表格的偏移值相等 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>
若想要做成自定義回調(diào)事件,可以用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ā)滾動回調(diào)事件 eval("self.vm."+self.expression)() }) } } },
關(guān)于怎么在Vue中固定表頭和首列就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。