当前位置: 首页 > Web前端 > HTML5

简单的html5和Rxjs同时实现固定列和表头的表格(forangular)

时间:2023-04-05 15:44:23 HTML5

参与大型项目或企业级系统开发的人经常会遇到数据复杂、数据量大的问题.通常需要在前端呈现大量的数据,我们通常使用表格来呈现。一目了然。很多人可能会问,现在的组件库不是很成熟了吗?各种功能强大、性能优越的组件应有尽有,比如(元素UI、反设计)。但它不是你自己的,永远不是最适合你的,就像你开着别人的法拉利,但感觉不如自己的面包车。言归正传,其实我公司使用的组件库是公司自己开发的库,并没有使用网上流行的。我不明白这是为什么,也不敢问。有个问题,公司的表格组件没有固定表头和列的功能,怎么办,自己写一个。红色部分通常需要固定,材料多的时候比较方便。pointcsspositon属性sticky,RXJSNow设计你的表格。在实现表格的功能和表现形式时,记得用一张表格来包含表头和表体,即需要两张表格。

添加CSS属性(固定列)。很简单,只需要添加.table-fix{position:sticky;z-索引:1;left:0;}sticky到需要固定的列(即td),left设置你需要固定的列在表格中的哪个位置。3.Rxjs监听scoll事件(使头部和身体的scoll位置保持一致)tableHeaderNativeElement,'scroll'):Observable.empty(),this.tableBodyNativeElement?Observable.fromEvent(this.tableBodyNativeElement,'scroll'):Observable.empty()).takeUntil(this.destroy$).subscribe((数据:MouseEvent)=>{this.syncScrollTable(data);});});}syncScrollTable方法设置head和body的scrollLeft一致就OK了。ngZone.runOutSideAngular方法用于将scoll事件与角度变化检测机制分离(scoll事件非常频繁,每次滚动都会触发角度变化机制,必然会消耗大量性能)。好了,现在你可以试试看能不能像excel一样修复表头和列。