Dieser Artikel stellt hauptsächlich die verschiedenen Methoden von Vue vor, um Beispielcode zum Korrigieren von Tabellenüberschriften und ersten Spalten zu implementieren. Ich werde ihn jetzt mit Ihnen teilen und als Referenz verwenden.
Manchmal ist die Tabelle zu groß und es ist unpraktisch, die Informationen beim Scrollen anzuzeigen. Es ist notwendig, die globale Kopfzeile und die erste Spalte der Tabelle zu korrigieren :
1. Erstellen Sie mehrere Tabellen zum Abdecken
Idee: Wenn die Seite zum kritischen Wert scrollt, a feste Kopfzeile und erste Spalte erscheinen
Erstellen Sie zuerst eine aktive Tabelle
<!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>
//监控表头位置 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() },
#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 >
//监控表头、首列位置 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()) }
2. Kontrollstil, um eine feste Überschrift und erste Spalte zu erreichen
Idee: Wenn die Tabelle den kritischen Wert erreicht, ändern Sie die Überschrift und den Stil der ersten Spalte
Implementieren Sie zunächst die feste Überschrift
<!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() {}, //监控表头位置 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; }
//监控表头,首列位置 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定位不占位,当固定表头出现时,有一行会补到表头位置,即有一行跳空,将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() }, },
3. Benutzerdefinierte Vue-Anweisungen zur Implementierung der Scroll-Überwachung
Bei Verwendung vue, es ist selten, eine so große Bibliothek wie Jq zu verwenden, und vue offiziell Es wird auch nicht empfohlen, Dom-Elemente zu verwenden, sodass Sie Anweisungen anpassen können, um eine feste Überschrift und erste Spalte zu erreichen. In diesem Artikel wird Vue.js v1.0.26 verwendet, aber die Idee von V2.0 ist tatsächlich dieselbe.
Geben Sie den Code direkt ein
<!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(){ //触发滚动监听事件 window.addEventListener('scroll',function(){ this.vm.monitor() }) } } }, methods: { //生成表格 CTable: function() {}, //监控表头、列头位置 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>
<table id="sTable" border="1" cellspacing="0" v-scroll="monitor">
directives:{ scroll:{ bind:function(){ var self=this; //触发滚动监听事件 window.addEventListener('scroll',function(){ //触发滚动回调事件 eval("self.vm."+self.expression)() }) } } },
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Einführung in die einheitliche Methode des Vue-Codierungsstils in vscode
Vue-Projektoptimierung durch Keep - So zwischenspeichern Sie lebendige Daten
So verwenden Sie Vue.js in Kombination mit dem Rich-Text-Editor Ueditor
Das obige ist der detaillierte Inhalt vonVue verwendet mehrere Methoden, um feste Tabellenköpfe und erste Spalten zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!