Home > Article > Web Front-end > Vue uses multiple methods to implement fixed table headers and first columns
This article mainly introduces Vue’s various methods to implement sample codes for fixing table headers and first columns. The content is quite good. I will share it with you now and give it as a reference.
Sometimes the table is too large and it is inconvenient to view the information when scrolling. It is necessary to fix the global header and first column of the table.
The effect is:
1. Create multiple tables for coverage
Idea: When the page scrolls to the critical value, a fixed header and first column appear
Create an active table first
| {{item.key}} |
|---|
| {{list.key}} |
Then add a fixed header:
#fHeader {
background: lightblue;
position: fixed;
top: 0;
}| {{item.key}} |
|---|
The fixed header appears when the monitoring table position reaches the top of the window
//监控表头位置
headerMonitor:function(){
var self=this
var hHeight=$("#sTable").offset().top;
$(document).scroll(function(){
//当滚动条达到偏移值的时候，出现固定表头
if($(this).scrollTop()>hHeight){
self.fixedHeader=true
}else{
self.fixedHeader=false
}
})
}Of course You need to call this method
ready: function() {
this.CTable();
this.headerMonitor()
},and then add a fixed first column and a fixed A1 cell
#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}} |
Similarly monitor the position of the 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
}
})
},Because the movement of the table will affect the table header position, so the offset value of the current table needs to be assigned to the fixed header. First column
setPosition:function(){
$("#fHeader").css("left",this.hLeft-$(document).scrollLeft())
$(".fixedCol").css("top",this.hHeight-$(document).scrollTop())
}Jq monitors and scrolls to create multiple tables to achieve fixed header and first column.html
2. Control style to achieve fixed header and first column
Idea: When the table reaches the critical value, change the header and the style of the first column
First implement the fixed header
| {{item.key}} |
|---|
| {{list.key}} |
Add a fixed first column
.fixedCol>:first-child{
background: lightblue;
position: fixed;
z-index: 1;
border:1px solid grey;
left: 0;
line-height: 50px;
}Monitor table position
//监控表头，首列位置
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
}
})
},Set offset value
//使固定表头与列头的偏差与当前表格的偏移值相等
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)
}
} Because when the table header becomes fixed positioning, it will break away from the document flow and the second row of the table will be hidden, so multiple lines are needed. Expand the width and height of the second column
/*因为fixed定位不占位，当固定表头出现时，有一行会补到表头位置，即有一行跳空,将tbody的第一行行高加倍*/
.fixedHeaderGap:first-child>td{
padding-top:54px;
}
/*因为fixed定位不占位，当固定列头出现时，有一列会补到列头位置，即有一列跳空,将tbody的第二列p设置padding*/
.fixedCol>:nth-child(2){
padding-left: 205px;
}When the browser opens the page again, you need to monitor whether the table still reaches the critical condition of fixed header
watch:{
//页面初始加载时，使固定表头与列头的偏差与当前表格的偏移值相等
"fixedHeader":function(){
this.setPosition()
},
"fixedCol":function(){
this.setPosition()
},
},Change the style to achieve fixed header Column.html
3. Vue custom instructions to implement scrolling monitoring
When using vue, such a huge library as Jq is rarely used, and vue official It is also not recommended to operate Dom elements, so you can customize instructions to achieve a fixed header and first column. This article uses Vue.js v1.0.26, but the idea of V2.0 is actually the same.
Go directly to the code
| {{item.key}} |
|---|
| {{item.key}} |
|---|
| {{list.key}} |
| {{item.key}} |
|---|
| {{item.key}} |
|---|
| {{list.key}} |
If you want to create a custom callback event, you can use eval(),