angular8 实现table表格表头固定_cdk-virtual-scroll-viewport 如何固定表头

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

html 结构

按区域划分可以分为三个大部分，一共是通过4个table 组合成一个整体的table。
然后通过 col 属性去设定列的宽度， 注意：这里的宽度必须要设置为固定值。
表头过滤功能暂时未实现。

水平滚动效果与垂直滚动效果

监听主体table（浅绿色部分）滚动事件，同步上下滚动头部的table （深绿色部分）和左右滚动左侧固定的table（红色部分中的紫色部分）

 $(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` })
 .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
按区域划分可以分为三个大部分，一共是通过4个table 组合成一个整体的table。
然后通过 col 属性去设定列的宽度，注意：这里的宽度必须要设置为固定值。
表头过滤功能暂时未实现。
水平滚动效果与垂直滚动效果
监听主体table（浅绿色部分）滚动事件，同步上下滚动头部的table （深绿色部分）和 左右滚动左侧固定的table（红色部分中的紫色部分）
 $(this.tableContent.nativeElement).on('scroll', 
				<scroll-view scroll-x onScroll="scrollX" scroll-left="{{scrollLeft}}">
  <view class="table__head" style="width:{{tableWidth}}rpx;">
    <view class="table__head__td" a:for="{{headList}}" a:key="attrIndex" a:for-index="attrIndex" a:for-item.
				&nbsp; &nbsp; &nbsp; &nbsp;Angular cdk Scrolling包给我们提供了一些指令和Service来应对滑动事件。推荐大家尽量去看官网上的介绍https://material.angular.io/cdk/scrolling/overview
&nbsp; &nbsp; &nbsp; &nbsp;想要在我们项目中使用cdk Scrolling功能，需要在我们模块...
　　在表格外面套一个相对定位标签，
　　在该标签内再复制两个绝对定位的表格，一个作为固定头部，一个作为固定左边栏，
　　再在该标签内添加一个放在左上角的标签，宽高与第一个td相同
　　当表格滚动的时候固定头部和左边栏的表格也跟着同步滚动（通过获取和设置scrollLeft和scrollTop）
示例代码如下：
.containt{te...
				近两年当中使用Angular开发过很多项目，其中也涉及到一些树形结构的显示，最近的在项目中封装了大量的组件，其中一些组件也涉及到树形结构，所以写出来总结一下。
相信大家都知道，树结构最典型的例子就是目录结构了吧，一个目录可以包含很多子目录，子目录又可以包含若干个子孙目录，那咱们今天就以目录结构为例来说明一下Angular中树结构的实现。
首先，我们希望封装一个组件，用于显示整个目录的树形机构，代码如下：
angular.module('treeDemo', [])
  .controller("TreeCo
<div id="left-menu" ng-controller="Left-navigation" class="col-sm-2" style="margin-top: 50px">
<!-- 仪表盘 -->
<!-- 让每一个一级菜单绑定一个函数na...
import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)
html代码
<!-- data数据 必须是树形结构 -->
<!-- columns 设置属性 -->
<!-- border边框 -->
<!-- show-
				最近遇到个问题，ngx-treeview这个控件不支持原生的异步数据加载，也没有点击展开时的“onExpandCollapse”事件，导致只能一次性地把全部数据加载进去，很慢。我并非前端开发人员，对typescript、angular这些都不太熟悉，所以花了两天时间才解决，以此记录。
ngx-treeview官方文档：ngx-treeview - npm (npmjs.com)
以及小例子：ngx-treeview (leovo2708.github.io)
我的方法：
自定义ng-template
2. 使用第三方库实现表头和列固定
可以使用一些第三方库，如ng2-table、ag-grid、ngx-datatable等，这些库提供了丰富的表格功能，包括表头和列的固定。
例如，使用ngx-datatable实现表头和列固定的示例：
```html
<ngx-datatable
  class="material"
  [rows]="rows"
  [columns]="columns"
  [columnMode]="'force'"
  [headerHeight]="50"
  [footerHeight]="50"
  [rowHeight]="'auto'"
  [scrollbarV]="true"
  [scrollbarH]="true"
  [reorderable]="true"
  [columnResize]="true"
  [scrollHeight]="'500px'"
  [frozenColumns]="1"
  [frozenRows]="1">
</ngx-datatable>
其中，`[columnMode]="'force'"`表示强制使用固定列模式，`[frozenColumns]="1"`表示固定左侧的1列，`[frozenRows]="1"`表示固定顶部的1行。
这些库都有详细的文档和示例，可以根据具体需求选择使用。