在Angular中实现粘性生成列可以使用position: sticky
属性和@HostListener
装饰器来监听滚动事件。下面是一个简单的解决方案:
position: sticky
和top
属性来实现粘性效果:th {
position: sticky;
top: 0;
background-color: #f9f9f9;
}
*ngFor
指令来动态生成列:
{{ column }}
columns
数组和一个方法来监听滚动事件并更新表头行的位置:import { Component, HostListener } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent {
columns = ['Column 1', 'Column 2', 'Column 3'];
@HostListener('window:scroll', ['$event'])
onScroll(event: Event) {
const table = document.querySelector('table');
const thead = document.querySelector('thead');
if (table && thead) {
const rect = table.getBoundingClientRect();
const sticky = rect.top <= 0;
thead.classList.toggle('sticky', sticky);
}
}
}
sticky
类添加样式来改变表头行的背景色和层级:th.sticky {
position: sticky;
top: 0;
background-color: #f9f9f9;
z-index: 1;
}
这样,当用户滚动页面时,表头行将保持在顶部,实现了粘性生成列的效果。