In diesem Artikel werden hauptsächlich die verschiedenen Methoden von Vue zum Implementieren von Beispielcode zum Korrigieren von Tabellenüberschriften und ersten Spalten vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.
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.
Der Effekt ist:
1. Erstellen Sie mehrere abzudeckende Tabellen
Idee: Wenn die Seite zum kritischen Wert scrollt, werden eine feste Kopfzeile und eine erste Spalte angezeigt erscheinen
Erstellen Sie zuerst eine. Die 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>
fügt dann eine feste Kopfzeile hinzu:
#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>
Eine feste Kopfzeile erscheint, wenn die Position der Überwachungstabelle den oberen Rand des Fensters erreicht
//监控表头位置 headerMonitor:function(){ var self=this var hHeight=$("#sTable").offset().top; $(document).scroll(function(){ //当滚动条达到偏移值的时候,出现固定表头 if($(this).scrollTop()>hHeight){ self.fixedHeader=true }else{ self.fixedHeader=false } }) }
Natürlich müssen Sie diese Methode aufrufen
ready: function() { this.CTable(); this.headerMonitor() },
Dann fügen Sie eine feste erste Spalte und eine feste A1-Zelle hinzu
#fHeader {
background: lightblue; position: fixed; top: 0; z-index: 1; } .fixedA1{ background: lightblue; position: fixed; top: 0; left: 0; z-index:2; }
Überwachen Sie auf ähnliche Weise die Position der Tabelle
<!--固定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 >
Da sich die Bewegung der Tabelle auf die Positionierung des Headers auswirkt, müssen Sie den Offsetwert der aktuellen Tabelle dem festen Header zuweisen. Erste Spalte
//监控表头、首列位置 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 } }) },
Jq überwacht das Scrollen und erstellt mehrere Tabellen, um eine feste Überschrift und erste Spalte zu erreichen.html
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
setPosition:function(){ $("#fHeader").css("left",this.hLeft-$(document).scrollLeft()) $(".fixedCol").css("top",this.hHeight-$(document).scrollTop()) }
Fügen Sie eine feste erste Spalte hinzu
<!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>
Überwachen Sie die Tabellenposition
.fixedCol>:first-child{ background: lightblue; position: fixed; z-index: 1; border:1px solid grey; left: 0; line-height: 50px; }
Stellen Sie den Versatzwert ein
//监控表头,首列位置 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 } }) },
Denn wenn der Tabellenkopf eine feste Position einnimmt, wird er aus dem Dokumentfluss ausbrechen und die zweite Zeile der Tabelle wird dies tun ausgeblendet werden, daher ist eine Erweiterung der Breite und Höhe erforderlich
//使固定表头与列头的偏差与当前表格的偏移值相等 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) } }
Wenn die Seite erneut im Browser geöffnet wird, muss überwacht werden, ob die Tabelle immer noch den kritischen Zustand des festen Headers erreicht
/*因为fixed定位不占位,当固定表头出现时,有一行会补到表头位置,即有一行跳空,将tbody的第一行行高加倍*/ .fixedHeaderGap:first-child>td{ padding-top:54px; } /*因为fixed定位不占位,当固定列头出现时,有一列会补到列头位置,即有一列跳空,将tbody的第二列p设置padding*/ .fixedCol>:nth-child(2){ padding-left: 205px; }
Ändern Sie den Stil, um eine feste Kopfzeile in der ersten Spalte zu erreichen.html
3. Benutzerdefinierte Vue-Anweisungen zur Implementierung der Bildlaufüberwachung
Bei Verwendung von Vue eine Bibliothek als riesig, da Jq selten verwendet wird und Vue-Beamte es nicht empfehlen, Dom-Elemente zu manipulieren, sodass Sie Anweisungen anpassen können, um feste Überschriften und erste Spalten zu implementieren. In diesem Artikel wird Vue.js v1.0.26 verwendet, aber die Idee von V2.0 ist tatsächlich dieselbe.
Laden Sie den Code direkt hoch
watch:{ //页面初始加载时,使固定表头与列头的偏差与当前表格的偏移值相等 "fixedHeader":function(){ this.setPosition() }, "fixedCol":function(){ this.setPosition() }, },
Wenn Sie ein benutzerdefiniertes Rückrufereignis erstellen möchten, können Sie eval(),
<!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">
Benutzerdefinierte Rückrufanweisungen verwenden, um den Tabellenkopf zu korrigieren. html
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
So implementieren Sie das Zusammenführen von Tabellenzellen in Bootstrap
So erhalten Sie die erste Zahl im Auswahl-Dropdown Feld in JavaScript A-Wert
So erhalten und zeigen Sie das Passwort in Echtzeit in AngularJS an
Das obige ist der detaillierte Inhalt vonSo korrigieren Sie den Tabellenkopf und die erste Spalte in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!