Angular8 实现table表格表头固定效果
更新时间：2020年01月03日 13:38:20 作者：jzzero
这篇文章主要介绍了Angular8 实现table表格表头固定效果，表头固定，内部实现滚动条效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
最近项目中有个需求，表头固定，内部实现滚动条。除了单个表头，还有多个表头的情况（下一篇中介绍）。
效果图：
html 结构
按区域划分可以分为三个大部分，一共是通过4个table 组合成一个整体的table。
然后通过 col 属性去设定列的宽度，注意：这里的宽度必须要设置为固定值。
表头过滤功能暂时未实现。
水平滚动效果与垂直滚动效果
监听主体table（浅绿色部分）滚动事件，同步上下滚动头部的table （深绿色部分）和 左右滚动左侧固定的table（红色部分中的紫色部分）
代码 1
$(this.tableContent.nativeElement).on('scroll', (e) => {
$(this.fixedRowWrapper.nativeElement).prop('scrollTop', $(this.tableContent.nativeElement).prop('scrollTop'));
//方式一 ：设置头部固定列table 的滚动条，需要配合less 样式隐藏滚动条（如果不考虑ie9的兼容性，可以使用。less样式参考代码2）
// $(this.tableHeader.nativeElement).prop('scrollLeft', $(this.tableContent.nativeElement).prop('scrollLeft'))
// 方式二：设置头部固定列table 的margin-left 属性为负值，间接实现了头部固定的列同步向左滚动效果，兼容ie9
$(this.tableHeader.nativeElement).css({ marginLeft: `${-$(this.tableContent.nativeElement).prop('scrollLeft')}px` })
})
代码 2
.ngx-table__header-inner {
// 隐藏滚动条，页面div 保持横向滚动，但是不支持ie9 ，为了兼容性所以没有使用，ts 中同步滚动
// 而是动态设置 ngx-table__header-inner 的margin-left 实现滚动效果
overflow: -moz-scrollbars-none;
overflow-x: auto;
-ms-overflow-style: none;
&::-webkit-scrollbar {
width: 0 !important;
display: none;
}
}
完整代码地址
github项目地址，需要的可以点击访问 https://github.com/zjinger/ngx-TPR/tree/master/src/app/components/scroll-table
总结
以上所述是小编给大家介绍的Angular8 实现table表格表头固定效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
本篇文章主要介绍了Angular 4.x Injector，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了angular6的table组件开发的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
在Angular的原生指令中有这几个指令用来控制元素的展示与否，ng-show/ng-hide/ng-if和ng-switch。在angular性能优化中，我们也常常会用到它。这篇文章主要给大家介绍了在Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程，需要的朋友可以参考。2017-05-05
这篇文章主要介绍了Angular 组件之间的交互的示例代码，根据数据的传递方向，分为父组件向子组件传递、子组件向父组件传递及通过服务传递三种交互方法。非常具有实用价值，需要的朋友可以参考下2018-03-03
这篇文章主要介绍了angular中使用路由和$location切换视图,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了AngularJS路由切换实现方法,结合具体实例形式分析了AngularJS路由切换的实现步骤与相关操作技巧,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了AngularJS自定义控件,结合实例形式详细分析了AngularJS自定义指令与模板操作的相关函数与使用技巧,需要的朋友可以参考下2016-12-12
下面小编就为大家带来一篇Javascript基础_标记文字的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
本篇文章主要介绍了如何在Angular2中使用jQuery及其插件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
Angular Universal服务器端渲染避免 window is not&
这篇文章主要介绍了Angular Universal服务器端渲染避免 window is not defined错误消息，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
最新评论